| home / programming / css_utopia / chap5 / |    [previous] [next] |
|
|
|
This HTML page displays as shown in Figure 5.9.
Now, let’s change the style sheet in this page so that it uses the padding shorthand to create a 1em padding space around the objects. The code fragment below will do the trick:
body {
background-color: #808080;
}
h1, h4 {
background-color: #c0c0c0;
padding: 1em;
}
As you can see in Figure 5.10, the amount of padding placed around the two heading elements is proportional to the size of the font in the elements themselves. Recall that 1em is equal to the height of the font in use. Consequently, much more space is placed around the h1 element than around the h4 element.
Now, let’s see what happens if we use a percentage rather than an em for the proportional padding value. Change the HTML, so the style sheet looks like this:
body {
background-color: #808080;
}
h1, h4 {
background-color: #c0c0c0;
padding: 10%;
}
The result of this change can be seen in Figure 5.11. Wow! There’s a huge amount of space around those elements. The browser has applied 10% of the width of the page (the body is the containing block for heading elements) as the padding on all four sides.
I’ve been using background color behind the text of the elements to make it easy for you to see the effect of these padding settings, but it’s not necessary to have background colors behind those elements to position them. Figure 5.12 uses the same HTML code as Figure 5.11, the only difference being that I’ve removed the background colors of the body and the h1 and h4 elements. As you can see, they maintain their relative spacing.
| home / programming / css_utopia / chap5 / | [previous] [next] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: March 27, 2003
Revised: June 16, 2003
URL: http://webreference.com/programming/css_utopia/chap5
