Frontend Engineering, Volume II

CSS: Example 3a—Inline <img>Positioning

© 2013, Martin Rinehart

Create a test page from your template.

Add an <img> Inside a <div>

Add to the Markup

Add a <div> and put a photo inside it. Nothing else. (Any photo will be fine.)

Style the <div>

Add <head> section styles for the div. Suit yourself. Be sure to add a border so you can see what you are getting. But do not add any padding on the bottom, nor any margin for the image.

View Your Results

Photo showing background pixels below bottom edge.

What are those pixels doing below the photograph? We'll solve this puzzle.

Feedback: MartinRinehart at gmail dot com

# # #