css – 是否可以阻止略微过大的内嵌图像(例如笑脸)影响其所在文本块的行高？

2023年2月25日 195次阅读

所以问题是当你有一个文本块,并且图像有点太高而你想要与文本一致.例如,一个笑脸.它将导致段落该行的行高增长,使文本块看起来很难看.

我实际上已经提出了一个解决方案,但它很混乱,我不喜欢它……如果我将笑脸包裹在一个相对定位的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！)

我想知道我是否缺少一些溢出/垂直对齐/浮动/显示等应用程序？

非常感谢！

最佳答案 根据所需的图像位置以及是否具有固定的行高(以像素为单位),您可以在图像上设置最大高度等于行高,并在图像上设置vertical-align：bottom,使其完全适合您的行.

有关示例,请参见此fiddle.

p {
    line-height: 18px;
}

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

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