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.