img元素下有空白 - Strange Town

在做wj8一个页面的时候，要在页面底部放一张长条的图片，我就直接放了个图片在最下面，为其设置了

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.