The 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:
163
Licensed to siowchen@darke.biz
Chapter 8: Simple CSS Layout
File: 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 in-
formation, 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 frag-
ment (remember that the new material is presented in bold text below):
164
Licensed to siowchen@darke.biz
The Box Model
File: 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:
File: boxmodel.html (excerpt)
h1 {
background-color: #c0c0c0;
color: black;
padding-left: 25px;
padding-top: 15px;
padding-bottom: 30px;
padding-right: 20px;
}
165
Licensed to siowchen@darke.biz
Chapter 8: Simple CSS Layout
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 padding-right is set to 0 and the browser window is
resized so there is barely enough room for the text. The second screenshot shows
the same page with padding-right set to 20px. Because the box now incorporates
20 pixels of padding on the right-hand side, the text can no longer run all the
166
Licensed to siowchen@darke.biz
The Box Model
way to the right hand border of the gray box, and the end of the sentence is forced
onto the next line.
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
Interpretation Number of
Values
Set all four padding values to this value.1
Set the top and bottom padding to the first value, and left and
right padding to the second.
2
Set the top padding to the first value, right and left to the second
value, and bottom to the third value.
3
Set the top padding to the first value, right padding to the
second, bottom padding to the third, and left padding to the
fourth value.
4
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:
File: 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:
167
Licensed to siowchen@darke.biz
Chapter 8: Simple CSS Layout
File: 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:
File: 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 ac-
cording 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 ele-
ment. To demonstrate these effects, let’s work with a new HTML page that dis-
plays two headings against colored backgrounds on a page of a contrasting color.
Here’s the HTML for that demonstration page:
File: 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>
168
Licensed to siowchen@darke.biz
The Box Model
<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 frag-
ment will do the trick:
File: boxmodel2.html (excerpt)
body {
background-color: #808080;
169
Licensed to siowchen@darke.biz
Chapter 8: Simple CSS Layout
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 ele-
ment.
Let’s see what happens if we use a percentage, rather than an em, for the propor-
tional padding value. Change the HTML so that the style sheet looks like this:
File: boxmodel2.html (excerpt)
body {
background-color: #808080;
color: black;
}
h1, h4 {
background-color: #c0c0c0;
color: black;
padding: 10%;
}
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.
170
Licensed to siowchen@darke.biz
The Box Model
Figure 8.14. Using ems for proportional padding
Figure 8.15. Using percentage for proportional spacing
171
Licensed to siowchen@darke.biz
Chapter 8: Simple CSS Layout
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
Margin Properties
The difference between margins and padding is that margins exist outside the
boundaries of the object, while padding exists inside those boundaries. Figure 8.17
illustrates this difference according to the style sheet rules that are set in the code
fragment below. Margins are set in the same way as padding; the only difference
is the substitution of the word “margin” for the word “padding.”
body {
background-color: #808080;
color: black;
}
172
Licensed to siowchen@darke.biz
Không có nhận xét nào:
Đăng nhận xét