是否可以阻止稍大的嵌入式图像（例如笑脸）影响其所在的文本块的行高？ [英] Is it possible to stop a slightly-too-big inline image (e.g a smiley) from affecting the line height of the block of text it's in?

问题描述

所以问题是当您有一段文字，并且图像太高而无法与文字对齐时。例如，一个笑脸。

So the problem is when you have a block of text, and an image that is slightly too tall that you want to place in-line with the text. For example, a smiley. It will cause the line height of that line of the paragraph to grow, making the block of text look ugly.

我实际上已经想出了一个解决方案，但是太杂乱了，我不喜欢...如果我将笑脸包裹在相对位置的div中，并赋予它绝对的位置，那么我会得到以下效果：

I've actually already come up with a solution, but it's messy and I don't like it... If I wrap the smiley in a relatively-positioned div, and give it an absolute position I get the effect that I'm after:

.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元素- pure CSS解决方案（没有javascript！）

But it adds extra markup. Is there any way to achieve this without adding extra HTML elements - a pure CSS solution (no javascript!)

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

I wonder if I'm missing some application of overflow/vertical-align/float/display etc?

非常感谢！

推荐答案

取决于所需的图像位置以及是否具有固定的行高（以像素为单位），您可以在图像上设置等于行高的最大高度，并设置 vertical-在图片上对齐：底部，使其完全适合您的行。

Depending on the desired image position and whether you have a fixed line-height in pixels you could set a maximum height on your image that equals your line-height and set vertical-align: bottom on the image so it fits exactly into your line.

请参见此小提琴为例。

p {
    line-height: 18px;
}

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

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

这篇关于是否可以阻止稍大的嵌入式图像（例如笑脸）影响其所在的文本块的行高？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！