<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