spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / programming / css_utopia / chap5 / To page 1To page 2To page 3current pageTo page 5To page 6To page 7To page 8
[previous] [next]

HTML Utopia: Chapter 5: Building the Skeleton

Senior Lotus Notes Developer
AMS Staffing Solutions
US-MD-Baltimore

Justtechjobs.com Post A Job | Post A Resume
Developer News
Google Chrome Playing Catch-Up on Extensions
Open Solutions Alliance Gets New Leadership
Red Hat Spacewalk Expands Linux Management

This HTML page displays as shown in Figure 5.9.

Figure 5.9. Proportional padding Page Starting Point

Proportional padding Page Starting Point

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.

Figure 5.10. Using ems for Proportional Padding

Using ems for Proportional Padding

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.

Figure 5.11. Using Percentage for Proportional Spacing

Using Percentage for Proportional Spacing

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.

Figure 5.12. Demonstration of padding Without Color Backgrounds

Demonstration of padding Without Color Backgrounds

home / programming / css_utopia / chap5 / To page 1To page 2To page 3current pageTo page 5To page 6To page 7To page 8
[previous] [next]

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

webref The latest from WebReference.com Browse >
Popular JavaScript Framework Libraries: An Overview - Part 3 · Accessing Your MySQL Database from the Web with PHP · Working with the DOM Stylesheets Collection
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
MS Access and MySQL · Cisco AutoQoS: VoIP QoS for Mere Mortals · While VoIP Adoption Explodes in Enterprise, Carrier Spending Lags

Created: March 27, 2003
Revised: June 16, 2003

URL: http://webreference.com/programming/css_utopia/chap5