這是怎麼回事呀？

我不是已經把 img 的外邊距和內邊距什麼的全部清空了麼？

實際上，這其實是inline元素搞的鬼。

任何不是塊級元素的可見元素都是內聯元素，其表現的特性是“行佈局”形式。----《CSS權威指南》

什麼意思？

意思就是，其實如圖片文字等內聯元素，它預設對齊方式都是和它的父級的 baseline 去進行對齊的，但是你對齊的是 baseline，撐開高度的卻是元素整體的高度（bottom line），這樣肯定就會造成一定的間隙，也就是我們上文出現的問題了。

1.第一種解決方案

既然是 inline 元素才會發生這個問題，那我們自然可以簡單粗暴的解決這個問題，那就是給我們的元素“變個性”，讓它從 inline 變為 block 不就可以了麼？display:block;

2.第二種解決方案

這也太粗暴了，變了性別，回頭還怎麼愉快的玩耍呀，所以我們要嘗試曲線救活，我們可以去修改一下它的垂直對齊方式呀，這樣是不是就可以了呢？ vertical-align 的預設屬性就是 baseline ，我們只要設定了跟 baseline 不一樣的屬性。vertical-align: middle;

3.第三種解決方案

但是修改了對齊方式，這樣也有可能會造成問題呀，我們可不可以去讓這個元素飄起來呢？既然你已經不在當前文件流中了，你佈局的時候自然也就不會參照這個文字去進行對齊了呀。

我們可以去使用浮動。float:left.

4.第四種解決方案

假如上面幾種方案全都不能解決你的問題，那麼只有祭出我的大殺器了。

你可以給你的父元素把文字大小設成0。font-size:0px;