div中的神祕多餘空間

Question

我試圖將圖像疊加在圖像上，當我將圖像包裝在div中並應用邊框時，可以看到之後還有額外的空間。這個空間從哪裏來，我該如何刪除它？以下jsfiddle有一個例子。

http://jsfiddle.net/ngd5R/22/

注意的.avatar背景是紅色，顯示邊框比它包含圖像越大。由於.message依靠父級的高度，因此我不能僅將邊框應用於img。

Answer 1

以下行添加到您的規則.avatar img：

display: block; 

紅色背景會自行消失。 Here's the updated fiddle。默認情況下，圖像是內聯元素（技術上，inline-block IIRC），這意味着它們與文本相同。如果您將圖像設爲塊級項目，則「文本樣式」流程規則將不適用。