Padding, Borders and Margins

TOC

For reference, here is the box attribute definition again:

Each box has four sides which can each have differing amounts of padding, border and margin width. The amounts can be set all four at a time, opposite sides and top/bottom, or singly:

padding: 1em;             /* sets padding on all four sides to 1em */
padding: 0 1em;           /* sets top and bottom padding to 0,
                             left and right padding to 1em */
margin: 0 .5em 1em .25em; /* sets top margin to 0, right margin to .5em,
                          /* bottom margin to 1em and left to .25em */

Padding

No padding. Padding is the space between the content container and the border. It is useful to use padding in bordered or colored paragraph blocks, like side bars, to add white space so text does not look crowded.

0.5em padding. Padding is the space between the content container and the border. It is useful to use padding in bordered or colored paragraph blocks, like side bars, to add white space so text does not look crowded.

Borders

The box border is a line (normally of zero width so as to be invisible) drawn around the padding area. Borders can be used to dress up document heads or set some text aside from the main body (sidebar). Each of the four border sides can be addressed independantly in any combination using border-top, border-left, etc. or, all borders can be set at once with border: 1px solid #000, for instance.

Borders can be set to have solid, dotted or dashed lines. The border width is usually specified in pixels or ems. Using percentages is not recommended as results are unpredictable in some browsers. Color can be any normal RGB triplet from #000 (black) to #FFF (white). For example, all four sides of the border are set to solid 2 pixel wide black in the following example:

<h3 style="border-top:2px solid #000; 
font-family:sans-serif; 
padding-top:4px;">Heading</h3>
<p>
Use a top border, padding and 
font family settings to make 
attractive headers.
</p>

<h3 style="border-top:2px solid #000; 
border-bottom: 1px dotted #090; 
font-family:sans-serif; 
padding-top:4px;">Heading</h3>
<p>
Here, in addition to the top border, 
the header bottom border has been 
independently set to 1 pixel dotted green.
</p>

Margins

Notice in the previous session last example that MSIE does not insert vertical space around the box inside a containing outlined div, while Mozilla defaults to a 1em vertical spacing. MSIE only inserts vertical space between paragraphs when no explicit margins have been set.

Same boxes, with explicit vertical margins declared:

After adding explicit margins, above, the boxes render the same in both MSIE and Gecko-based browsers. Notice in all cases how the space between boxes compresses to a single new line, rather than two, even when explicit margins are declared. It makes some sort of sense, but also seems to defy the rules of the box model.

<< Visual Formatting: Boxes | Index | Colors and Backgrounds >>