<img>元素底部為何有空白？

現代瀏覽器中，&元素默認情況下底部會有空白，那麼這個空白到底是從哪裡來的？

有什麼比較好的方法可以去掉這個空白？

1. img { display:block; }
2. img { vertical-align:top/bottom/middle; }

Demo：http://jsbin.com/oDapIBi/1/edit

---

一絲大大提這個問題真的不是想自問自答嗎？

@zecy 的回答點到了一些，但還是沒說清楚。

要理解這個問題，首先要弄明白CSS對於 display: inline 元素的 vertical-align 各個值的含義。vertical-align 的默認值是 baseline，這是一個西文排版才有的概念：

可以看到，出現在baseline下面的是 p 啊，q 啊, g 啊這些字母下面的那個尾巴。

對比一下 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?

---

下深部導致的間距吧。。。好像就是這個詞，基線和底線之間這段

---

一絲你這是來收集大家的愚蠢的咩

我還是得貼個我的博客里關於這篇文章 圖片，表格以及莫名的空隙

---

前幾天寫 HUI 的時候，順手研究了一下如何做 Icon Font。研究了西文字體的幾個屬性，並嘗試用 Fontlab Studio 畫了一些圖標。關於西文字體，建議深入閱讀：連載：字體細語2——英文字體的基礎知識 和 Illustrator+FontLab進行字體設計教程-Illustrator教程

---

由於調整圖片容器的字體也可以：

.box {font-size:0;}


所以考慮是基線引起的問題，圖片底部是基於文字基線的，而容器 div 的底部是低於基線的。所以這個空白實際上是文字基線以下的部分。

同樣的道理，無論 img 設置 display:block 還是 vertical-align:top/bottom/middle 都將使 img 超出文字基線，致使空白消失。

---

深入理解 CSS：字體度量、line-height 和 vertical-align

---

空白是div的高度造成的。圖片作為行內元素，和文字一樣具有字型大小和行高屬性，所以會頂起div。

你把div裡面的font-size設為0就不會有這個空白了。

---

給img加一個vertical-align: bottom;

html - How to remove extra margin-bottom from floted image?

---

困擾我已久的問題解決，感謝一絲大大這個問題

---

是行內樣式的基準線在作怪！！！支持 @張有泉的答案！

---

之前也碰到過，doctype的問題，把你的doctype換成DTD形式的完整聲明，而不是這種簡寫形式空隙就會消失了，個人覺得應該從doctype這個角度出發，找出導致問題的本質原因。

---

推薦閱讀：