img元素下有空白

在做專案裡乙個頁面的時候，要在頁面底部放一張長條的，我就直接放了個在最下面，為其設定了

width: 100%

各種嘗試（比如外面套個 div 之類）無果，就上網查了下。正好 segmentfault 裡有乙個類似的問題 為什麼 div 裡巢狀了 img 底部會有白塊

這裡有人解釋了：

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

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

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

查了 dash 文件裡的 vertical-align，又鏈結到了這篇understanding vertical-align, or "how (not) to vertically center content"。非常好的文章！

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

img底部總是有空白

最近在做專案時，使用table，div，css布局，最頂部加入img 後，底部總是有空白 經過查詢了大量資料，問題總算是解決了。1 將轉換為塊級物件 即，設定img的style為 style display block 或是在本例中新增一組css img 經試驗，此方法可以解決。2 設定的垂直對齊方...

元素底部留有空白

要理解這個問題，首先要弄明白css對於 display inline 元素的 vertical align 各個值的含義。vertical align 的預設值是 baseline，這是乙個西文排版才有的概念 可以看到，出現在baseline下面的是 p 啊，q 啊,g 啊這些字母下面的那個尾巴。對...

元素底部為何有空白？

要理解這個問題，首先要弄明白css對於 display inline 元素的 vertical align 各個值的含義。vertical align 的預設值是 baseline，這是乙個西文排版才有的概念 對比一下 vertical align 的另外兩個常見值，top 和 bottom 可以看...