为什么图片img下方会出现一行空白？

我们在使用inline或inline-block做img图片对齐的时候，通常会发现图片下方有一行空白，这样的空白直接影响我们的显示效果，那么为什么会出现那样的空白呢？

可以看到上图，图片底部就是基线位置，蓝色的线就是底线位置，这是由于行内元素的vertical-align的对齐方式默认为baseline。图片和单词是两个行内元素，如果想上下居中对齐，需要对图片和单词都设置vertical-align:middle样式。

图片元素特殊，没有内容文字，这样基线的位置就定义在了图片的底部，以基线对齐就会出现被底线顶出去的一部分空白，这部分空白的大小取决于行内最大文字的大小，也就是基线到底线的距离。

如何去掉图片底部的空白？

1. 可以设置图片为块级元素，也就是display:block;
2. 在图片元素同级的元素没有文字的时候，可以将图片的父元素的font-size设置为0。
3. 有文字的时候，可以将图片的父元素的line-height设置为0，破坏对齐。
4. 也可以设置图片的float值，隐式的将图片改变成块级元素，破坏行内对齐方式。

了解文字书写的四条线

行高、行距与半行距

行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离。

行距是指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。

半行距是行距的一半，即区域3垂直距离/2，区域1，2，3，4的距离之和为行高，而区域1，2，4距离之和为字体size，所以半行距也可以这么算：（行高-字体size）/2