The CSS1 box model provides three different things that can add space around an element: margin, border, and padding. The three serve different purposes. However, the distinction between margin and padding is poorly understood. In a world where no one stylesheet author has total control, the distinction is very important. The key differences are as follows:
If an element does not have background or border, then it doesn't matter (except for margin collapsing) whether space is given by margin or padding. However, since another stylesheet written by someone else can specify background or border, the choice between margin or padding should be made as though there is a background or border. I think it is generally better to act as though there is a background, and worry less about borders. Borders can be confusing because thinking about borders might make one want both margin and padding and also because borders often require extra space (often padding), whereas backgrounds do not.
For example, should the space to the left of an unnumbered list be
given as margin or padding, and on what element, the
li? Since the
marker-offset gives the offset of the markers from the
border edge of the list item, it can't be padding on the
li. If a background or border is drawn on the
ul element, then one would want the background and
border to enclose the bullets. This means the space can't be a
margin on a
ul (which is unfortunately the traditional
interpretation of this space). It should be either a margin on the
li or padding on the
ul. I happen to
prefer (for almost no reason) padding on the
For typical block level elements, usually it is best to specify margin. Padding should usually be specified along with border, although it also makes sense for floating elements or other somewhat separated sections.
One final (somewhat obscure) note: Most of the discussion above has centered on box properties on block-level elements. The box properties all still apply to inline elements, but the top and bottom box properties on non-replaced inline elements do not cause any increase in line spacing (and thus top and bottom margins are useless).
To be written. (One reason it isn't written is that I'm not sure what it will say. Should it lean more towards my notes on related properties or on relying on inheritance?)
(Up to User Stylesheets Guide, CSS, David Baron)
LDB, email@example.com, 1999-08-11