HTML and CSS Reference
When using Firebug for Firefox, you must right-click an element and select Inspect Element. Firebug doesn't show
the box model until you hover over the element in the DOM window, though. It colors the content area blue, the pad-
ding purple, and the margin green.
Internet Explorer 9's equivalent of the Inspect Element feature is called Select element by click, which you can find
in the F12 Developer Tools, represented as a white cursor. After you select that, you can then click on the element
you want to inspect.
Initial value: 0 | Inherited: No | Applies to: All except elements with table display types other than table-caption,
table, and inline-table | CSS2.1
Browser Support: IE 3+, Firefox 1+, Chrome 1+, Opera 3.5+, Safari 1+
As you saw in the box model explanation, margin applies space outside an element. A margin can be a value of
any length type, such as pixels, percentages, and ems. You also can use the auto keyword to make the browser de-
termine the margin of an element based on the unused space around that element.
Using margin is a great way of adding white space— also known as negative space— between elements on a web
page. White space is an empty area and doesn't necessarily mean a space is white in color. It is used to give web
pages design aesthetics such as rhythm and balance, making for a better user experience.
You may agree at the moment that the Cool Shoes & Socks page doesn't have much rhythm or balance; all the ele-
ments are squashed together because they have margins of 0 . You can change that:
1. In styles.css, find the following declaration in the body rule set:
margin: 0 auto;
This is the declaration you added in Chapter 5 to make the page centered.
The margin property is actually shorthand for the properties margin-top , margin-right , margin-
bottom , and margin-left . By specifying two values for the shorthand margin property, you tell
the browser the top and bottom of the <body> element should have no margin and the left and right
should have a margin of auto .
2. Change the margin value of the body rule set to the following:
margin: 2.5em auto 0 auto;
3. Save styles.css.
Now the <body> has a margin-top of 2.5em , a margin-right of auto , a margin-bottom of 0 , and a
margin-left of auto . The <body> is still centered but now with some white space above it so the logo no
longer touches the top of the window.
You also are able to achieve the same effect using just three values, like so: margin: 2.5em auto 0 . In this
case, the margin-top is 2.5em , the margin-left and margin-right are auto , and the margin-bot-
tom is 0 .
Code Challenge: Add More Margins to Elements