Frontend Engineering, Volume II

CSS: Example 3c—Inline Text/Image Positioning

© 2013, Martin Rinehart

Add Text and an Image Inside a <div>

Add to the Markup

Add the image from lesson 3a to the text from lesson 3b.

Use styles to suit yourself, but again do not put anything below the bottom of the text and image. Absolutely nothing. (That includes padding.)

View the Results

Photo showing text and image with pixels below bottom edge.

Mystery solved! The bottom of the image is aligned with the baseline of the text. There is enough space between the border of the div and the baseline of the text to accommodate the largest descender (under the "g").

Feedback: MartinRinehart at gmail dot com

# # #