Frontend Engineering, Volume II

CSS: Example 3a—Inline `<img>`Positioning

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.)

    <div id='puppy'>

        <img
            alt='photo, cute puppy'
            border=0
            src='../../graphics/snuffy.jpg'
            title='photo, cute puppy'
        >

    </div> <!-- puppy -->

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

# # #

CSS: Example 3a—Inline <img>Positioning

Add an <img> Inside a <div>

Add to the Markup

Style the <div>

View Your Results

CSS: Example 3a—Inline `<img>`Positioning

Add an `<img>` Inside a `<div>`

Style the `<div>`