今天在debug代碼的時候，遇到一個css問題。注意看出現了一些空隙。以前遇到此類問題，我一般做法都是直接加display:block進行解決，今天深入分析一下原因。
首先看這段空隙對應的原始碼如下
<ul>
<li><img src="images/1.jpg" alt=""/></li>
<li><img src="images/2.jpg" alt=""/></li>
<li><img src="images/3.jpg" alt=""/></li>
<li><img src="images/4.jpg" alt=""/></li>
<li><img src="images/5.jpg" alt=""/></li>
</ul>
代碼看起來沒有任何問題，那麼問題真的來了：
空隙去哪裡了啊？
問題原因：
圖片文字等inline元素預設是和父級元素的baseline對齊的，而baseline又和父級底邊有一定距離（這個距離和 font-size，font-family 相關，不一定是 5px），所以設定 vertical-align:top/bottom/text-top/text-bottom 都可以避免這種情況出現。而且不光li，其他的block元素中包含img也會有這個現象。
解決方案：
將圖片display: block
設定img為“display:block;”。在本例中添加一組CSS代碼：“img {display:block;}”。比較常用的做法。
設定圖片的對齊
即設定圖片的vertical-align屬性為“top，text-top，bottom，text-bottom”也可以解決
設定圖片的父級物件常值大小為0px
“font-size:0;”可以解決問題。但這也引發了新的問題，在父物件中的文字都無法顯示。就算文字部分被子物件括起來，設定子物件文字大小依然可以顯示，但在CSS效驗的時候會提示文字過小的錯誤。
設定圖片的浮動
即在本例中增加一行CSS代碼：“#sub img {float:left;}”。如果要實現圖文混排，這種方法是很好的選擇。
各種做法自行考量，我偏向於設定浮動或塊顯示，有些人偏向於使用vertical-align進行解決。
