img元素下有空白

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

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.