| home / programming / css_utopia / chap5 / |    [previous] [next] |
|
|
|
The way we set margin properties is identical to the way we set padding properties. The property names substitute the word “margin” for the word “padding,” including the shorthand property.
The difference between margins and padding is that margins exist outside the boundaries of the object, while padding exists inside those boundaries. Figure 5.13 illustrates this difference, based on the style sheet rules in the following code fragment.
body {
background-color: #808080;
}
h1 {
background-color: #c0c0c0;
}
h2 {
background-color: #c0c0c0;
margin-left: 5%;
}
p {
background-color: #c0c0c0;
margin-left: 20%;
}
Notice that the second-level heading and the paragraph, for both of which we’ve set margin-left properties, are indented from the left edge of the browser. But here, unlike the example in which we set the padding-left property, the text and its background color block are indented. This is because the color block and the text are inside the content box and the margin is outside that box.
Let’s next apply padding-left and margin-left settings to the code fragment.
body {
background-color: #808080;
}
h1 {
background-color: #c0c0c0;
}
h2 {
background-color: #c0c0c0;
margin-left: 5%;
padding-left: 1em;
}
p {
background: #c0c0c0;
margin-left: 20%;
padding-left: 10%;
}
As you can see in Figure 5.14, the margin has pushed the HTML elements and their surrounding background color blocks to the right, while the padding has moved the text to the right within the colored background blocks.
Horizontal margin effects are cumulative. Take a look at the following HTML code, and at Figure 5.15, which shows how it is rendered.
<!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 {
background-color: #c0c0c0;
}
h2 {
background-color: #c0c0c0;
margin-left: 5%;
padding-left: 1em;
}
p {
background-color: #c0c0c0;
margin-left: 20%;
padding-left: 10%;
}
li {
background-color: #ffffff;
}
li p {
margin-left: 10%;
}
-->
</style>
</head>
<body>
<h1>No left margin set for this level-one heading</h1>
<h2>Left margin set at 5% for me</h2>
<p>A paragraph with a margin-left set at 20%. This will result in
a deep indent of the paragraph from the left margin.</p>
<ul>
<li>Item one</li>
<li><p>Paragraph item</p></li>
</ul>
</body>
</html>
The big difference here is in the bulleted list. Notice that the first item in the list displays with no extra indentation. This is not surprising, as the style rules do not define any extra margin settings for an li element. Look at the second list element, however, which is a paragraph. The last style rule in the HTML above assigns a paragraph that is the descendant of an li element a margin-left setting of 10%. As you can see, this margin applies to the existing left margin of the bulleted list, which results in the paragraph item being pushed further to the right. Note also that this same element is a paragraph, so it retains the styling of all p elements, including their padding-left setting of 10%. This produces the additional indentation of the paragraph text within the gray box in the list.
If you load the above HTML (from the file boxmodel4.html included in the code archive for this book) and resize it, you’ll notice that the indentation of the paragraph element inside the list changes as the width of the window changes. That’s because I used a relative value of 20% for the margin and 10% for the padding. Both of these values are therefore calculated relative to the width of the containing block (the list item), which in turn takes its width from the browser window. The bigger the browser window, the bigger the margin and padding on the nested paragraph.
You can set vertical margins with the margin-top and margin-bottom properties. Here’s another HTML page that demonstrates vertical margins:
<!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 {
background-color: #c0c0c0;
margin-bottom: 5%;
}
h2 {
background-color: #c0c0c0;
margin-left: 5%;
margin-top: 5%;
margin-bottom: 5%;
padding-left: 1em;
}
p {
background: #c0c0c0;
margin-left: 20%;
padding-left: 10%;
margin-top: 5%;
margin-bottom: 5%;
}
-->
</style>
</head>
<body>
<h1>No top margin but 5% bottom margin</h1>
<h2>Top and bottom margins set 5% for me</h2>
<p>A paragraph with top and bottom margins set at 5%</p>
</body>
</html>
This page renders as shown in Figure 5.16. If you load this document (boxmodel5.html) and resize the browser, you’ll notice that vertical spacing increases and decreases accordingly, but stays proportional.
| home / programming / css_utopia / chap5 / | [previous] [next] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: March 27 2003
Revised: June 16, 2003
URL: http://webreference.com/programming/css_utopia/chap5
