Html div内的图像在图像下方有额外的空间

为什么

div

的高度大于

img

的高度？图像下方有一个间隙，但似乎不是填充/边距

图像下方的间隙或额外空间是多少？

#包装器{
边框：1px纯红；
宽度：200px；
}
img{
宽度：200px；
}

---

默认情况下，图像以内联方式呈现，就像字母一样，因此它与a、b、c和d位于同一行上

在这一行下面有一个空格，你可以在字母g，j，p和q上找到

你可以：

• 调整图像的位置，使其位于其他位置（例如，

  中间位置

  ），或
• 更改

  显示

  ，使其不内联

div{
边框：纯黑1px；
边缘底部：10px；
}
#对齐中间img{
垂直对齐：中间对齐；
}
#对齐基础img{
垂直对齐：底部对齐；
}
#显示img{
显示：块；
}

违约
敏捷的棕色狐狸跳过了懒狗
垂直对齐：中间对齐
敏捷的棕色狐狸跳过了懒狗
垂直对齐：底部对齐
敏捷的棕色狐狸跳过了懒狗
显示：块
敏捷的棕色狐狸跳过了懒狗

本文建议的另一个选项是将图像的样式设置为

style=“display:block；”

也可以将父图像的线条高度置零：

#wrapper {
  line-height: 0;
}

---

所有修复：

我刚刚在div中添加了

float:left

，它工作了

我使用了

行高：0

，对我来说效果很好。

我发现使用display:block时效果很好；在图像上垂直对齐：顶部；在文本上

.imagebox{
宽度：200px；
浮动：左；
高度：88px；
位置：相对位置；
背景色：#999；
}
.集装箱{
宽度：600px；
高度：176像素；
背景色：#666；
位置：相对位置；
溢出：隐藏；
}
.文本{
颜色：#000；
字体大小：11px；
字体系列：robotomeduim，无衬线；
垂直对齐：顶部；
}
.imagebox img{display:block；}

图像标题
图像标题
图像标题
图像标题
图像标题
图像标题

快速修复： 要消除图像下方的间隙，您可以：

• 将图像属性设置为

  垂直对齐：底部
  垂直对齐：顶部或
  垂直对齐：中间

• 将图像的显示属性设置为

  display:block

有关实时演示，请参见以下代码：

#有效img{
垂直对齐：底部对齐；
}
#块式img{
显示：块；
}
div{边框：1px实心红色；宽度：100px；}
img{宽度：100px；}

无修复程序：

与垂直对齐：底部；关于图像：

带显示：块；关于图像：

您只需分配此属性：

img {
    display: block;
}

img {
    display: inline;
}

默认情况下，图像具有以下属性：

img {
    display: block;
}

img {
    display: inline;
}

---

您可以使用以下几种方法解决此问题：

使用

行高

#包装{行高：0px；}

使用

display:flex

#包装器{display:flex；}
#包装器{display:inline flex；}

使用

显示：

块

，

表

，

flex

和

继承

#包装器img{display:block；}
#包装器img{display:table；}
#包装器img{display:flex；}
#包装器img{display:inherit；}

---

---

谢谢这也解决了flash电影下的空间问题。（添加了显示：嵌入块/对象标记）或

内联块

，如果您仍然希望它像通常的图像那样内联显示。@Ian@commerce

内联块

似乎不起作用。警告！这还将杀死#包装器中的所有文本节点。因为它将被继承。但对那个了不起的小提琴手来说，还有额外的积分！在这里，它使用文本节点进行更新。或者，字体大小：0更准确地说，b/c内联元素会占用其当前

行高度的空间。将
行高
设置为所需的尺寸也会克服不需要的空白。“f”是否符合下降者的条件？@j08691-取决于字体。请注意，如果使用的是
垂直对齐：底部
或
中间
，如果图像较小（小于行高），你可能会看到神秘空间出现在图像上方。减少测试用例：这是因为设置
float:left
会导致
display:block
，所以将字体大小设置为0不起作用。还是真的？@Persijn是的。如设置
行高：0但是我不认为这是一个很好的解决方案，与改变垂直对齐或显示属性的注释相比，但是，有些浏览器不尊重<代码>字体大小：0 < /代码>：它们将字体大小设置为用户设置中的最小大小。是的，它看起来像是白色的空间。我认为图片中的
中间
文本顶部
子
超级
位置不正确。关于这个问题，这里有一个很好的解释：抱歉，-1：这会搞乱文本定位，所以如果有人在图像旁边放置一些文本（特别是多行，比如带有

）文本，他们会有一个错位，重叠/悬垂混乱。请不要推荐非常草率的
行高度
破解，或者至少要说明为什么这是最糟糕的“解决方案”：当有人将文本放在图像旁边时（尤其是带有BR标记的预格式化多行），他们会发现自己的处境比开始时更糟糕。这在所有解决方案中对我帮助最大。然而，我的环绕div现在扩展到了主题图像之外，以前在div中显示inline block修复了这个问题。泰