是否有可能阻止稍微过大的内联图像(例如笑脸)影响其所在文本块的行高？

Question

所以问题是当你有一个文本块，并且图像有点太高，你想把它放在文本中。例如，一个微笑。这会导致段落那一行的行高增加，使文本块看起来很难看。

事实上，我已经想出了一个解决方案，但它很乱，我不喜欢它……如果我把笑脸包在一个相对定位的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！）

我想知道我是否错过了溢出/垂直对齐/浮动/显示等应用程序？

非常感谢！

Answer 1

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

请看这把小提琴的例子。

p {
    line-height: 18px;
}
p img {
    max-height: 18px;
    vertical-align: bottom;
}
<p>Some text <img src="/smiley.gif"> more text.</p>

Answer 2

将图像设置为div的背景，并为div提供固定的尺寸。

<div class="smiley"></div>

CSS：

.smiley {
    float:right; <-- or inline-block if you want.
    background-image:url(../smiley.gif);
    height:20px;
    width:20px;
}