Is it possible to stop a small, too large inline image (for example, a smiley face) from affecting the line height of a block of text?

Question

So the problem is that you have a block of text and an image that is a little too large to fit the text to fit the text. For example, a smiley face. This will increase the line height of this paragraph line, making the text block ugly.

I actually already have a solution, but it is messy, and I don’t like it ... If I wrap the emoticon in a relatively positioned div and give it an absolute position, I get the effect, I 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 he adds extra markup. Is there a way to achieve this without adding additional HTML elements - a pure CSS solution (without javascript!)

I wonder if I am missing any overflow / vertical alignment / float / display application etc.

Many thanks!

Answer 1

Depending on the desired image position and the presence of a fixed line height in pixels, you can set the maximum image height equal to the line height and set vertical-align: bottom to the image so that it exactly matches your line.

See fiddle example 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> 

Answer 2

Set the image as a background div and give a fixed div size.

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

CSS

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