要理解這個問題，首先要弄明白css對於 display: inline 元素的 vertical-align 各個值的含義。vertical-align 的預設值是 baseline，這是乙個西文排版才有的概念：
對比一下 vertical-align 的另外兩個常見值，top 和 bottom:
可以看到，baseline 和 bottom 之間有一定的距離。實際上，inline 的下面那一道空白正是 baseline 和 bottom 之間的這段距離。即使只有沒有文字，只要是 inline 的這段空白都會存在。
到這裡就比較明顯了，要去掉這段空白，最直接的辦法是將的 vertical-align 設定為其他值。如果在同一行裡有文字混排的話，那應該是用 bottom 或是 middle 比較好。
另外，top 和 bottom 之間的值即為 line-height。假如把 line-height 設定為0，那麼 baseline 與 bottom 之間的距離也變為0，那道空白也就不見了。如果沒有設定 line-height，line-height 的預設值是基於 font-size 的，視渲染引擎有所不同，但一般是乘以乙個係數（比如1.2）。因此，在沒有設定 line-height 的情況下把 font-size 設為0也可以達到同樣的效果。當然，這樣做的後果就是不能**混排了。
延伸閱讀：
what is vertical align
元素底部留有空白
要理解這個問題，首先要弄明白css對於 display inline 元素的 vertical align 各個值的含義。vertical align 的預設值是 baseline，這是乙個西文排版才有的概念 可以看到，出現在baseline下面的是 p 啊，q 啊,g 啊這些字母下面的那個尾巴。對...
元素底部為何有空白及其解決方案
要理解這個問題，首先要弄明白css對於 display inline 元素的 vertical align 各個值的含義。vertical align 的預設值是 baseline，這是乙個西文排版才有的概念。vertical align的有效取值為baseline,sub,super,top,te...
img底部總是有空白
最近在做專案時，使用table，div，css布局，最頂部加入img 後，底部總是有空白 經過查詢了大量資料，問題總算是解決了。1 將轉換為塊級物件 即，設定img的style為 style display block 或是在本例中新增一組css img 經試驗，此方法可以解決。2 設定的垂直對齊方...