html - 未应用图像的 CSS 行高

Question

我在 div 中有一张图片，可以这样说：

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

div 的样式是 line-height:36px;

图片高度为12px

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

如果我 在图像旁边放置一个， line-height 将再次开始工作。

将图像设置为内联，给 div 一个特定的字体大小，似乎没有什么区别

score 1 · Accepted Answer

1

将新样式应用于 div ：

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

愿这对你有所帮助。

于 2013-09-10T19:27:09.653 回答

score 1 · Accepted Answer

可能是因为 img 已设置为display:block. 在这种情况下，没有任何东西可以形成线框。如果没有 line-box，则 line-height 没有任何应用。

可能浮动 img 也可能使事情变得混乱，因为这也不会留下任何东西来创建线框。但在这种情况下，div 将折叠到 0 高度，而不是仅仅环绕图像。

score 0 · Accepted Answer

try div { font-size: 0; }，它的高度必须和它的 line-height 一样

3 回答 3