Frontend Engineering, Volume II

CSS: Example 3b—Inline Text Positioning

© 2013, Martin Rinehart

Add Text Inside a <div>

Add to the Markup

Copy your page from the previous lesson. Delete the image.

Add text including an inline span with a larger font.

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

View the Results

Photo showing text with pixels below bottom edge.

Notice the pixels below the baseline of the text. Note that the larger font uses a larger descender (see the "g") and the space between the baseline and the div's border is exactly enough to accommodate this descender.

Feedback: MartinRinehart at gmail dot com

# # #