CSS------ vertical-align

1、代码如下所示：

<span style="font-size:18px;"><div style="background-color: #5e2750">
    <img src="http://img3.imgtn.bdimg.com/it/u=57810688,3895733255&fm=21&gp=0.jpg" alt=""/>
    <span style="color: white">hello world</span>
</div></span>
效果图：

由图可以看出，图片的下方有间隙，是由于图片的vertical-align默认是基线对齐，但是图片没有基线，所以图片的底端与基线对齐。

2、什么是基线

基线（base line）就是英文字母“x”的下端沿,类似于写英文单词时候的四线格中的第三条线。

由图可以看出，图片底部是与e(类似于x)的下端对齐，我们添加了"qq"字母，可以看出qq和父元素的底部是对齐的。这也是为什么无论怎么改变"hello world"的样式都无法把字母下端的间隙去掉。

注：一个inline-block元素，如果里面没有inline内联元素，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。

3、怎么去掉图片下方的空隙

（1）将img的display属性设置为block，因为vertical-align属性对块级元素是无效的

（2）将vertical-align属性值设置为bottom/text-bottom