Article
Rock-solid CSS Layouts
The Box Model
From the perspective of a style sheet, every item you deal with in an HTML page can be viewed as existing inside a box. This fact is generally far more obvious when you're formatting large chunks of content, like the three main page areas we've identified in our design. 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 8.8.
Figure 8.8. The 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 images that might comprise the content of a news story or a set of links. "Content" describes any item that's contained within the area of the box.
Notice from the diagram 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 between each side of the visible box and adjacent elements. Similarly, the visible height of the box is determined by adding the height of the content 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 a single shorthand property. Border behavior is slightly more complicated because, in addition to width, a border can have characteristics such as line style and color.
In this discussion, 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 borders.
For the next few sections, I'll use a basic, single-box layout to demonstrate CSS rule techniques. It starts out as the layout shown in Figure 8.9, with no padding, border, or margin: the content is the same size as the box.
Figure 8.9. Starting point for the box model demonstration
I've given the h1 element a gray background so you can see more easily the impact of the effects I'll be demonstrating. The HTML below produces the page shown in Figure 8.9:
Example 8.10. boxmodel.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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;
color: black;
}
</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 vs Percentages
As the box model deals with the display of content on the screen, the pixel is the most commonly used of the absolute measurement units in CSS. However, if you need to create a layout that takes up all of the available space, regardless of how big the browser window is, it's necessary to use the percentages rather than pixels. Such layouts are characterized by their "stretchy" behavior—the page elements expand and contract proportionately as the user resizes the browser window.
Padding Properties
Four properties 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 replicates the following fragment (remember that the new material is presented in bold text below):
Example 8.11. boxmodel.html (excerpt)
h1 {
background-color: #c0c0c0;
color: black;
padding-left: 25px;
}
The result of this change is shown in Figure 8.10. 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 8.10. Demonstrating padding-left
As you'd expect, you can set the other padding sizes the same way, as this code fragment shows:
Example 8.12. boxmodel.html (excerpt)
h1 {
background-color: #c0c0c0;
color: black;
padding-left: 25px;
padding-top: 15px;
padding-bottom: 30px;
padding-right: 20px;
}
Figure 8.11. Defining all four padding properties
You can see the effects of these changes in Figure 8.11.
You may notice that the padding on the right-hand side appears not to have worked. You asked for 20 pixels, but no matter how wide you stretch the window, the gray area that defines the box containing 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. The 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-hand side. If you make the browser narrow enough, though, you can see the padding take effect.
Figure 8.12. Demonstrating the effect of padding-right
Figure 8.12 demonstrates this principle. The first screenshot shows how the page from Figure 8.11 looks if you narrow the browser window so that there would be room for the word "in" on the first line if padding-right was 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, in several cases, the right padding size looks large enough to accommodate the word on the next line. In fact, merely removing the padding-right declaration from the style sheet produces the result shown in Figure 8.12.
Because it's often necessary to adjust padding around objects in HTML, the CSS standards define a shorthand property that's simply called padding. You can give this property up to four values; Table 8.1 identifies how the properties will be assigned in each case.
Table 8.1. Effects of multiple values on padding shorthand property
Remembering the Order
To remember the order in which these values are specified, simply recall that they're identified in clockwise order from the top, or remember the mnemonic trouble (top, right, bottom, and left).
For example, the style rule above could be rewritten using the padding shorthand property as follows:
Example 8.13. boxmodel.html (excerpt)
h1 {
background-color: #c0c0c0;
color: black;
padding: 15px 20px 30px 25px;
}
To create equal top and bottom padding, and equal left and right padding, you could use:
Example 8.14. boxmodel.html (excerpt)
h1 {
background-color: #c0c0c0;
color: black;
padding: 15px 25px;
}
Finally, to create equal padding on all four sides of the h1 element, you could use this markup:
Example 8.15. boxmodel.html (excerpt)
h1 {
background-color: #c0c0c0;
color: black;
padding: 25px;
}
What would happen if you used either ems or percentages for the padding values? The two units 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 or height of the block that contains the element. To demonstrate these effects, let's 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 demonstration page:
Example 8.16. boxmodel2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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;
color: black;
}
h1, h4 {
background-color: #c0c0c0;
color: black;
}
</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
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.
This HTML page displays as shown in Figure 8.13.
Figure 8.13. Proportional padding page starting point
Now, let's change the style sheet for this page so that it uses the padding property to create a single-em padding space around the objects. The following code fragment will do the trick:
Example 8.17. boxmodel2.html (excerpt)
body {
background-color: #808080;
color: black;
}
h1, h4 {
background-color: #c0c0c0;
color: black;
padding: 1em;
}
As you can see in Figure 8.14, the amount of padding that appears around the two heading elements is proportional to the size of the font used in the elements themselves.
em: a Height Measurement
Remember that one em 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.
Let's see what happens if we use a percentage, rather than an em, for the proportional padding value. Change the HTML so that the style sheet looks like this:
Example 8.18. boxmodel2.html (excerpt)
body {
background-color: #808080;
color: black;
}
h1, h4 {
background-color: #c0c0c0;
color: black;
padding: 10%;
}
Figure 8.14. Using ems for proportional padding
The result of this change can be seen in Figure 8.15. Wow! There's a huge amount of space around those elements. The browser has applied 10% of the width of the page as padding on all four sides.
Figure 8.15. Using percentage for proportional spacing
I've been using a background color behind the text of these elements to make it easy to see the effect of the different padding settings, but the background colors aren't required. Figure 8.16 uses the same HTML code as Figure 8.15; the only difference is that I've removed the background colors from the body, h1, and h4 elements. As you can see, these elements maintain their relative spacing.
Figure 8.16. Demonstrating padding without colored backgrounds