css - 是否可以阻止稍微太大的内联图像(例如笑脸)影响其所在文本 block 的行高？

Question

所以问题是当您有一段文本和一张略微太高而您想与文本对齐的图像时。例如，笑脸。它会导致段落那一行的行高增长，使文本 block 看起来很难看。

我实际上已经想出了一个解决方案，但它很乱而且我不喜欢它...如果我将笑脸包裹在一个相对定位的 div 中，并给它一个绝对位置，我得到的效果是我在追求:

.holder{display:inline-block;position:relative;width:16px}
.holder img{position:absolute;top:-16px}

<span class="holder"><img src="/smiley.gif" height="16" width="16"></span>

但是它添加了额外的标记。有什么方法可以在不添加额外的 HTML 元素的情况下实现这一目标 - 纯 CSS 解决方案(没有 javascript!)

我想知道我是否遗漏了一些溢出/垂直对齐/ float /显示等应用程序？

非常感谢!

Answer 1

根据所需的图像位置以及是否有以像素为单位的固定行高，您可以在图像上设置等于行高的最大高度，并设置 vertical-align: bottom on图像，使其完全适合您的线条。

查看此 fiddle举个例子。

p {
    line-height: 18px;
}

p img {
    max-height: 18px;
    vertical-align: bottom;
}

<p>Some text <img src="/smiley.gif"> more text.</p>