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.