div中的神秘多余空間

Question

我正在嘗試在圖像上覆蓋文本，當我將圖像包裝在div中並應用邊框時，您會發現之后有多余的空間。 這個空間是從哪里來的，如何刪除它？ 以下jsfiddle有一個示例。

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

請注意， .avatar的背景為紅色，以表示邊界框大於其包含的圖像。 我不能僅將邊框應用於img因為.message依賴於父對象的高度。

Answer 1

.avatar img添加到.avatar img的規則中：

display: block;

紅色背景將消失。 這是更新的小提琴 。 默認情況下，圖像是內聯元素（從技術上講，是inline-block IIRC），這意味着它們的流動與文本相同。 如果將圖像設為塊級項目，則“文本樣式”流規則將不適用。