爲什麼塊級元素比它包含的圖像更高？

Question

沒有高度規格，僅包含單個圖像的<div>（或<p>或任何其他類似元素）比它高一點。它看起來在Firefox中高出4px，在Chrome中高出5px（根據Firebug及其鉻版等價物）。圖像下添加額外的空間。

很明顯，我可以通過給div分配一個高度來解決這個問題，但我想知道爲什麼這個空間在那裏，而且有一種方法可以消除它。

Answer 1

Image是內聯級別元素，因此它符合行高設置，並且默認情況下它將設置在文本的基線上。

如果將設置圖像具有vertical-align: bottom它將在下降線（文字線的最底端）

另一種選擇是將圖像設置爲display: block，並跳過所有這些內嵌噱頭圖像定位

Answer 2

加入CSS：

img {display: block;} 

默認情況下img有display:inline因此，所有的文本行相關的東西。

Answer 3

將line-height: 0px;添加到包含元素的。

將img設置爲display:block也可以工作，但如果您在其他位置隱藏和顯示圖像display:none/display:inline，則可能會中斷。