Question

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.

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>

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?

Many thanks!

Answer 1

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.

See this fiddle for an example.

p {
    line-height: 18px;
}

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

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