未应用图像的 CSS 行高答案

【问题标题】：CSS line-height with image not being applied未应用图像的 CSS 行高
【发布时间】：2013-09-14 15:34:38
【问题描述】：

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

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

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

图片高度为12px

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

如果我在图像旁边放置一个&nbsp;，则 line-height 将再次开始起作用。

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

【问题讨论】：

标签： html css

【解决方案1】：

为 div 应用新样式：

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

希望对您有所帮助。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

试试div { font-size: 0; }，它的高度必须和它的行高一样

【讨论】：