I wanted to write about positioning in CSS but recently I realized that I needed to go back to the beginning before grappling with issues like the Position and Display properties.
The box model is the starting point to understanding positioning in CSS. In fact, every single element in your markup is actually a box.
Make this your personal mantra. Every element on a page is a box
described by the content, padding, border and margin properties. This
is so simple as to be totally elusive. It isn't immediately obvious
because the default value for the border element isn't visible and the
background default setting is transparent. To the browser, even a
single period is treated as a little box.
Since a box has four sides, the padding, border and margin
properties each have four settings for the top, right, bottom and left
sides; designers often use the word TRouBLe as a memory jog. For
example:
/* Top Right Bottom Left */
padding: 5px 10px 5px 10px;
In theory, padding, border and margin values are optional and should
default to zero. In the real world, this is often not the case. The user-agent stylesheet
of different browsers may add values for the padding and margin. To
overcome this, I always add a universal selector rule to the start of
my style sheets to zero these out:
* {
margin: 0;
padding: 0;
}
The visible dimensions of the box are the sum of the content +
padding + border values. The margin values determine the distance
between the elements, horizontally and vertically.
Collapsing Margins
Most designers won't admit to their original ignorance of this one.
They may have set several block elements vertically, then added top and
bottom margins to each element. When the elements didn't have the
expected vertical spacing between them, I'll bet they just shrugged,
stuck in a few <br /> tags and marched on. Of course, that never
happened me ;-)
Here's how it works: when vertical margins meet, they will collapse
to form a single margin whose height will equal the larger of the two
combined margins. Mystery solved. Note however, that this rule only
applies to boxes in the normal flow of the document.
You can also use negative margins, but that is beyond the scope of this article (I've always wanted to say that).
Margin and Padding Shorthand
You may have been confused in the past when viewing CSS and coming
across margin or padding rules with less than four values. This is
actually a shorthand syntax. You can use one, two, three or four values
within a shorthand declaration:
/* Padding on all sides */
padding: 5px;
/* Top and Bottom: 5px, Left and Right: 10px */
padding: 5px 10px;
/* Top: 5px, Left and Right: 10px, Bottom: 15px */
padding: 5px 10px 15px;
To sum up, whenever you set the width of an element on the page, you
are actually setting the width of the content within it. If you set
values for margins, padding or borders, you increase the space this
element occupies on the page. Understanding this is fundamental, and
necessary, before attempting to handle the other issues of positioning
in CSS.
