我正在尝试在图像上叠加文本，当我将图像包装在div中并应用边框时，您可以看到之后有额外的空间。这个空间来自哪里，我该如何删除它？以下jsfiddle有一个例子。
请注意，.avatar的背景为红色，表示边界框大于其包含的图像。我不能将边框应用于img，因为.message依赖于父级的高度。
答案 0 :(得分：1)
将以下行添加到.avatar img的规则中：
display: block;
红色背景会消失。 Here's the updated fiddle。默认情况下，图像是内联元素（技术上，inline-block IIRC），这意味着它们与文本相同。如果将图像作为块级项目，则“文本样式”流规则将不适用。