HTML Utopia: Designing Without Tables Using CSS. Chapter 5: Building the Skeleton | 3 | WebReference

HTML Utopia: Designing Without Tables Using CSS. Chapter 5: Building the Skeleton | 3

HTML Utopia: Chapter 5: Building the Skeleton

Setting the Padding Properties

There are four properties that together define the padding around an object in a CSS rule: padding-left, padding-right, padding-top and padding-bottom.

Let’s change just one of the padding settings to get a feel for how this works. Modify the style sheet in the sample file, so that it looks like the following fragment (remember that the new material is bold):

h1 {
  background-color: #c0c0c0; 
  padding-left: 25px;
}

The result of this change is shown in Figure 5.4. Notice that the text now begins 25 pixels from the left side of the box, resulting in 25 pixels of blank, gray space to the left of the text.

Figure 5.4. padding-left Demonstration

padding-left Demonstration

As you’d expect, you can set the other padding sizes the same way, as shown in this code fragment:

h1 {
  background-color: #c0c0c0; 
  padding-left: 25px; 
  padding-top: 15px; 
  padding-bottom: 30px; 
  padding-right: 20px;
}

You can see the effect of these changes in Figure 5.5.

Figure 5.5. All Four Padding Properties Defined

All Four Padding Properties Defined

You may notice that the right side of the padding appears not to have worked. You asked for 20 pixels, but no matter how wide you stretch the window, the gray area defining the box that contains our h1 element just goes on and on.

This is because padding-right creates a space between the right edge of the text and the right edge of the heading, as represented by the gray box. This spacing is difficult to see in this case, because the heading automatically spans the width of the browser window, leaving plenty of room for the text to breathe on the right side. If you make the browser narrow enough, though, you can see the padding take effect.

Figure 5.6 demonstrates this principle. The first screenshot shows how the page in Figure 5.5 looks if you narrow the browser window so that there would be room on the first line for the word “in” if padding-right were not set as it is. The second screenshot reinforces this idea by showing the page resized so that one word only fits on each line. Notice that the right padding size looks, in several cases, large enough to accommodate the word on the next line. In fact, merely removing the padding-right property from the style sheet produces the result shown in the third screenshot.

Figure 5.6. Demonstration of Effect of padding-right

Demonstration of Effect of padding-right

Because it’s often necessary to adjust padding around objects in HTML, the CSS standards define a shorthand property simply called padding. You can give this property up to four values. Table 5.1 tells you how the properties will be assigned in each case.

Table 5.1. Effect of Multiple Values on padding Shorthand Property

No. of Values Interpretation
1 Set all four padding values to this value.
2 Set the top and bottom padding to the first value, left and right padding to the second.
3 Set the top padding to the first value, right and left to the second value, bottom to the third value.
4 Set the top padding to the first value, right padding to the second, bottom padding to the third, and left padding to the fourth.[a]

[aYou can remember this as clockwise, starting from the top, or as TRBL (trouble), whichever you find easier to remember.

For example, the last code fragment above could be rewritten using the padding shorthand property as follows:

<style type="text/css">
<!--
h1 {
  background-color: #c0c0c0; 
  padding: 15px 20px 30px 25px;
}
-->
</style>

To create equal top and bottom padding, and equal left and right padding, even though right padding is all but meaningless in this context, you could use:

<style type="text/css">
<!--
h1 {
  background-color: #c0c0c0; 
  padding: 15px 25px;
}
-->
</style>

The result of this code fragment is shown in Figure 5.7.

Figure 5.7. Equal Top-Bottom and Left-Right Padding Using padding Shorthand

Equal Top-Bottom and Left-Right Padding Using padding Shorthand

Finally, to create equal padding on all four sides of the h1 element, you could code this:

h1 {
  background-color: #c0c0c0; 
  padding: 25px;
}

This code produces the result shown in Figure 5.8.

Figure 5.8. Equal Padding on All Sides Using padding Shorthand

Equal Padding on All Sides Using padding Shorthand

What if you use either ems or percentages for the padding values? The two have slightly different effects. The em unit scales the padding according to the size of the font of the content, while the percentage unit scales the padding according to the width of the block that contains the element. To demonstrate these effects, we’ll work with a new HTML page that displays two headings against colored backgrounds on a page of a contrasting color.

Here’s the HTML for that demo page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Box Model Demo</title>
<meta http-equiv="Content-Type"
  content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
  background-color: #808080;
}
h1, h4 {
  background-color: #c0c0c0;
}
-->
</style>
</head>
<body>
<h1>Help! I'm Stuck in a Box Model!</h1>
<h4>But it's not too crowded if you're just a little old h4
  heading like me! In fact, it's kind of cozy in here.</h4>
</body>
</html>

Notice that I’ve given the page a dark grey background and I’ve added an h4 element, which I’ve styled in the same CSS rule as the h1 element.

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

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