img元素下有空白

Awbeci 發布于2019-08-28 18:25 / 3037人閱讀

摘要：對比一下圖片和右邊的等字母，你會發現這三個字母的小尾巴和圖片下方的空白一樣高。要去掉空格可以使用或將標簽變為塊級元素。用這個試了下，果然有效。非常好的文章的應用元素應該是以及。如果應用在塊級元素上，則會為其子元素應用該屬性。

在做項目里一個頁面的時候，要在頁面底部放一張長條的圖片，我就直接放了個圖片在最下面，為其設置了

width: 100%

ftp 到服務器上去之后，以后就完工了，結果打開手機一看，（圖片）下面有一條白邊！！

各種嘗試（比如外面套個 div 之類）無果，就上網查了下。正好 segmentFault 里有一個類似的問題為什么 div 里嵌套了 img 底部會有白塊

這里有人解釋了：

因為img默認是按基線(baseline)對齊的。對比一下圖片和右邊的 p, q, y 等字母，你會發現這三個字母的“小尾巴”和圖片下方的空白一樣高。

要去掉空格可以使用 vertical-align: bottom 或將 img 標簽變為塊級元素。

用這個 vertical-align 試了下，果然有效。

然后我就查了下這個 vertical-align 屬性，結果發現它直接影響著元素在垂直方向上對位置，特別是對于圖片。

查了 dash 文檔里的 vertical-align，又鏈接到了這篇Understanding vertical-align, or "How (Not) To Vertically Center Content"。非常好的文章！

vertical-align 的應用元素應該是 table-cell 以及 inline-block 。如果應用在塊級元素上，則會為其 inline-block 子元素應用該屬性。

那如果真的想搞個垂直居中怎么辦？文章還介紹了兩種垂直居中的方法：

一種就是把父設為 relative，子設為 absolute 并且把子的 margin-top 設為負的自身一半高度（也就是說這里的子元素的高度是一個確定的值）。

還有一種是針對只有一行文本的情況，Set the line-height of the parent element to the fixed height you want.

云服務器 GPU云服務器 img空白圖片元素img 下有 linux下有qq嗎

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111218.html

移動端H5頁面注意事項

摘要：移動端活動頁面常常需要能夠分享到各種社交中，常用的有微信等。微信二維碼問題同一個頁面里要是有兩個二維碼，長按掃描總是只能掃出左側第一個二維碼。首發于簡書博客：http://www.jianshu.com/p/e958... 2017-11-25 更新：5. 使用 Gulp 拼合圖片 1. 單個頁面內容不能過多設計常用尺寸：750 x 1334 / 640 x 1134，包含了手機頂...

weknow619 2019-08-01 18:04 評論0 收藏0
移動端H5頁面注意事項

摘要：移動端活動頁面常常需要能夠分享到各種社交中，常用的有微信等。微信二維碼問題同一個頁面里要是有兩個二維碼，長按掃描總是只能掃出左側第一個二維碼。首發于簡書博客：http://www.jianshu.com/p/e958... 2017-11-25 更新：5. 使用 Gulp 拼合圖片 1. 單個頁面內容不能過多設計常用尺寸：750 x 1334 / 640 x 1134，包含了手機頂...

madthumb 2019-08-29 13:53 評論0 收藏0
探究：絕對定位沒有設置 top, right, bottom, left 的世界是怎樣的？

摘要：一個元素如果設置了但沒有設置此元素的位置在哪在涉及到絕對定位元素的位置問題時一個重要的概念是想要了解元素的位置還得找到此元素的才行如下是我進行的一系列測試以及對測試結果的試探性解釋文中的英文術語都不翻譯方便直接查或者其他技術文檔請持有懷疑精一個元素如果設置了position: absolute;, 但沒有設置top, right, bottom, left, 此元素的位置在哪? 在涉...

kbyyd24 2019-08-28 18:14 評論0 收藏0
多行文本溢出時出現省略號

摘要：多行文本溢出時出現省略號本文推薦種方法。溢出時不顯示溢出的內容發生溢出時使用省略號代替瀏覽器的私有屬性。顯示指定的文本。顯示多少行塊級元素。默認顯示的替代文本延遲多長時間后執行是否有窗口大小改變時執行默認操作具有這個類的元素。多行文本溢出時出現省略號本文推薦2種方法。 1. css tip：只兼容chrome內核的瀏覽器。ff不支持。 .box { overflow: hi...

王偉廷 2019-08-29 15:43 評論0 收藏0
div高度比包含的img元素高出3px的問題

摘要：問題描述寫的時候遇到了一個小問題只包含一個元素，但是頁面展示上卻比高出一點。因此當我們的塊級元素包含這個行內元素的時候底部就出現了的間距。問題描述寫css的時候遇到了一個小問題div只包含一個img元素，但是頁面展示上div卻比img高出一點。當時只覺得匪夷所思...找了半天自己樣式的問題...情況如下圖 showImg(https://segmentfault.com/img/b...

newsning 2019-08-29 15:42 評論0 收藏0