HTML and CSS Reference
In-Depth Information
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.
margin
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
