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），这意味着它们与文本相同。如果您将图像设为块级项目，则“文本样式”流程规则将不适用。