HTML and CSS Reference
In-Depth Information
padding), and the
margin
is transparent spacing between the border (or edge of the box, if it has no
border) and the box's neighboring content.
The
width
and
height
properties in CSS can define—no surprise here—the width and height of a box.
Somewhat less self-explanatory is that the
width
and
height
properties apply only to the
content area
of
the box, and any padding or borders are
added to
any declared dimensions. This seems counter-intuitive
at first, and has confused many designers when they start using CSS for page layout. After all, when you
buy a new appliance, they put the foam padding
inside
the box. When you declare dimensions in CSS
you're actually declaring the size of the
content area
and not the box drawn around it.
A box 300 pixels wide with 5 pixels of padding on each side and a 5 pixel border will take up 320 pixels on
the rendered page; 5px + 5px + 300px + 5px + 5px = 320px. If you wanted a box exactly 300 pixels wide,
including the 20 pixels of padding and borders, you would need to give it a width of 280 pixels
(
width:280px;
).
You can specify box dimensions with the value
auto
(the default, which just lets a browser calculate the
size of the box automatically), a percentage of the box's parent element, or a length using any unit of
measure available in CSS—
px
(pixels),
pt
(points),
pc
(picas),
in
(inches),
cm
(centimeters),
mm
(millimeters),
em
(equal to the element's font size), or
ex
(the x-height of the element's font).
If the contents of a box exceed its specified dimensions, those contents will overflow the boundaries of the
box. Text will automatically wrap to fit within the width you specify, assuming the box is wide enough to
accommodate the longest word; long, unwrapping words will overflow horizontally. Heights, though, can be
harder to predict. Fonts and font sizes can (and will) vary depending on user preferences and the fonts
they have installed. Different browsers also render text in subtly different ways, so, for example, a
sentence that fits neatly on one line in Chrome might wrap to a second line in Internet Explorer. Given the
fluid nature of text on the web, it's usually best to avoid declaring a height for any element containing text,
instead allowing the box to automatically adjust to the height of its contents.
Margins and Padding
Margins are transparent space between the outside edge of a box and the content or elements that
surround it. You can specify margins for each side of a box separately, using a different value for each
side, if you like:
.intro {
margin-top: 20px;
margin-bottom: 2em;
margin-left: 5%;
margin-right: 5%;
}
To apply the same margin to all four sides at once, the shorthand
margin
property will spare you a lot of
repetition:
.intro { margin: 20px; }
The
margin
property can accept up to four values, separated by spaces, applying each value to each side
in clockwise order: top, right, bottom, left:
