A Smarter Way To Learn HTML & CSS(2015)

26
Positioning an image

If you don’t tell the browser where you want an image placed, the browser will place it all the way over on the left. It’ll also array consecutive images side-by-side across the screen if there’s room.

You can isolate an image on its own line by letting the browser know that you want the image treated as a block, not an inline element. When it’s treated as a block, it gets to monopolize the horizontal space it sits in.

As you’ve learned, this is how you tell the browser to treat an image as a block.

img.normal {
display: block;
}

Even though the browser positions an image all the way over on the left by default, you can move it to the right as far as you like, using margins. The following code defines an image class that moves an image slightly to the right of the left edge of the page or of the div that contains it.

img.inset {
display: block;
margin-left: 1em;
}

If you wanted it farther to the right, you’d increase the em number.

A reminder: inset is a name I made up. You can name a class anything you like as long as you follow the naming rules.

In your CSS file create a class that moves an image right. In your HTML file add that class to the second loris image. Remember, an element can have more than one class assigned to it. So the image will have both the class “has-own-line” and the class “inset.” Save the files and display the page.

Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-26-1.html.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-26-2.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/26.html