Html 未应用图像的CSS行高度

我在一个div中有一个图像，让我们这样说：

<div>
<img src="myimage.png">
</div>

div的样式为行高：36px

图像的高度是12像素

这段代码存在于许多网站上（比如按钮/徽章等）——它基本上总是有效的。但偶尔，div会在图像周围崩溃，我试图找出原因

如果我在图像旁边放置一个

，线条高度将再次开始工作

---

将图像设置为inline，为div指定一个特定的字体大小，似乎没有什么不同

将新样式应用于div：

<div style="display:list-item;"></div>

---

希望这对您有所帮助。

请尝试

div{font size:0；}

，它的高度必须与它的行高相同

---

可能是因为img已设置为

显示：block

。在这种情况下，没有任何东西可以形成一个行框。如果没有行框，则没有要应用的行高度

可能浮动img也会混淆问题，因为这也不会留下任何东西来创建行框。但在这种情况下，div将塌陷到0高度，而不是仅环绕图像

---

请参见

如何知道div已崩溃？我的第一个猜测是，代码段的CSS规则被其他更具体的规则过度编写。我不太明白如何再现“图像周围的折叠”效果。为什么不在DIV上使用高度，而在大小上不使用线条高度？看起来确实有效-我需要做更多的测试，你能解释为什么吗？当我们没有给出任何元素的高度时，线条高度不起作用