我正在尝试在图像上覆盖文本，当我将图像包装在 div 中并应用边框时，您可以看到之后有额外的空间。这个空间来自哪里，如何删除它？下面的 jsfiddle 有一个例子。
请注意，背景.avatar是红色的，表明边界框比它包含的图像大。我不能只应用边框，img因为.message依赖于父级的高度。
问问题
70 次
我正在尝试在图像上覆盖文本，当我将图像包装在 div 中并应用边框时，您可以看到之后有额外的空间。这个空间来自哪里，如何删除它？下面的 jsfiddle 有一个例子。
请注意，背景.avatar是红色的，表明边界框比它包含的图像大。我不能只应用边框，img因为.message依赖于父级的高度。
将以下行添加到您的规则中.avatar img：
display: block;
红色背景将消失。这是更新的小提琴。默认情况下，图像是内联元素（技术上，inline-blockIIRC），这意味着它们与文本相同。如果您将图像设置为块级项目，则“文本样式”流规则将不适用。