Article
HTML Utopia: Designing Without Tables Using CSS, Chapter 5: Building the Skeleton
The CSS Box Model
From the perspective of a style sheet, everything you deal with in HTML pages can be viewed as living inside a box. This fact is generally far more obvious when you’re formatting large chunks of content, like the seven design elements in the Footbag Freaks Website. But it’s true even when you’re dealing with individual components of those elements, like headings, lists, list elements, and even segments of text.
The basic CSS box model is shown in Figure 5.2.
Figure 5.2. Basic CSS Box Model
At the center of the CSS box model is the content itself. Don’t think of this “content” as being the same as words or pictures that comprise the content of a news story or a set of links. The content is anything contained within the area of the box.
Notice from Figure 5.2 that the visible width of the box is determined by adding together the content width, the padding and the border. The margin determines the distance on each side between the visible box and adjacent elements. Similarly, the visible height of the box is determined by adding the content’s height to the padding and border settings. Once again, the margin determines how far the box will be separated from adjacent objects vertically.
The width of each of these elements—margin, border, and padding—can be set using four CSS properties (one for each side of the box), or using a single shorthand property. Border behavior is slightly more complicated because a border can have not only a width but also visible characteristics such as line style and color.
I’ll begin by explaining and demonstrating the use of padding in some detail. Then, I’ll move on to a discussion of margins, which will be briefer, as it’s so similar to padding. Finally, I’ll discuss the border property and its variations.
For the next several sections, I’ll use a basic, single-box layout to demonstrate CSS rule techniques. It starts out as in Figure 5.3 with no padding, border, or margin properties defined, so that the content is the same size as the box.
Figure 5.3. Starting Point for Box Model Demonstrations
I’ve given the h1 element a gray background so you can see more easily the impact of the effects I’ll be demonstrating. I'll describe the background-color property I've used here more fully in Chapter 7.
This HTML produces the page shown in Figure 5.3:
<!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">
<!--
h1 {
background-color: #c0c0c0;
}
-->
</style>
</head>
<body>
<h1>Help! I'm Stuck in a Box Model!</h1>
</body>
</html>
Throughout the rest of this discussion, I’ll be modifying only the style sheet information, so I’ll reproduce only that section of the code, indicating any changes
in bold.
Pixels Versus Percentages
Because the box model deals with the display of content on the screen, the pixel measurement (abbreviated px) is the most commonly used of the absolute measurement units in CSS. However, often we desire to create a “stretchy” layout, in which case it is necessary and appropriate to use the percentage model (with the % symbol), rather than pixels. I’ll have more to say on this subject in
Chapter 6.
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
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
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
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
1 You can remember this as clockwise, starting from the top, or as TRBL (trouble), whichever you find easier to remember.
