Step by Step HTML5

Controlling Image Size and Padding 149
1. Examine the document in Internet Explorer. Notice the placement of the text in
relation to the graphic.
2. In Notepad, add a clear style rule to the tag near the top:
3. Save the file, and then refresh Internet Explorer.
The horizontal line, and everything that follows it, appears below the graphic.
CLEAN UP Close the Notepad and Internet Explorer windows.
Of course, this isn’t a look that you would want to keep, because there’s too much white
space around the graphic. But in the next exercise, you will learn how to specify the
graphic’s size to fix that.
Controlling Image Size and Padding
Image size is expressed in pixels. If you want, you can specify only the width; the height
will be resized proportionally, or vice versa. But you also have the option to specify both
the width and the height. For example, suppose the following is your original image,
which is 150 pixels high: