Embedding Images Within Lines of Text

Most of you have embedded an image within text. You have a paragraph of text, and you embed an image within it the same size as the text.

If you use height:1em; for the image, it may open up the interline spacing. That's because 1em includes the descenders. The base of the image doesn't start that low. Thus, it sticks up above the actual text. (There is a way to avoid that, mentioned shortly.)

Manually specifying a pixel height for the image can be done. But if it is too small, it looks dinky. Too large, and the image expands the interline spacing. If you decide to change the text font size, you may need to resize all those images.

That is, unless you specify the CSS declarations height:1em; vertical-align:text-bottom; within the img tag.

The vertical-align:text-bottom; CSS declaration moves the image down so the bottom of the image is in line with the bottom of the text descenders. Now a 1em tall image won't stick above the top of the text. And the interline spacing won't change.

The height:1em; vertical-align:text-bottom; declarations should not affect the interline spacing.

• height:1em; is the height of the text. The font size.

• vertical-align:text-bottom; brings the bottom of the image down to the bottom of the text descenders (so the image height won't alter the interline spacing).

If you change the text font size, the image height will change automatically.

The Willmaster logo images embedded in the following examples have the CSS declarations height:1em; vertical-align:text-bottom; specified in the img tag.

The examples demonstrate font size changes. You'll see the image height adjust itself to match the font size.

Here is the basic source code of the above examples. On your test page, change the font size to see the image grow or contract.

<p style="font-size:16px;">
The height of the image is the text font size.
<img style="height:1em; vertical-align:text-bottom;" src="https://www.willmaster.com/images/wmlogo_icon.gif" alt="Willmaster.com logo">
When you change the font size, the image height will also change.
</p>

There are times when an image must be a specific size. I've found in most instances, however, I want the image within the line of text to adjust its height when the font size is changed. The above code accomplishes it.

(This content first appeared in Possibilities newsletter.)

Will Bontrager