RichInStyle.com CSS1 tutorial

All HTML elements can have box model properties applied to them. Box model properties do not inherit.

There are three properties here: margin, border and padding; these apply to any element. In addition, the width and height of the element are also important.

As to the difference between margin and padding, margin is the space outside the element, and padding that inside it. Thus the padding color is the background-color of the element, whereas the margin color is the background-color of the parent element (except where the element doesn't have a parent, as with BODY or HTML).

Note that although box properties do not inherit, a margin applied to the BODY will affect all elements inside it, since they are all still inside BODY. If they inherited, then if the BODY had a 2-inch left margin, P would start four inches from the left of the page, etc.

The containing block

All element have a containing block. Elements are usually aligned with the edge of their containing block. In addition to providing a reference point for alignment, the width and height of the containing block is also used for interpreting the value of % on box model properties.

The containing block of normal static (static as opposed to positioned) elements is their nearest block-level ancestor. For example, in <BODY><P>, the containing block of the P element is BODY, and therefore margins, etc., on P will refer to the width of that.

An element that has display: block generates a block box. This defines the containing block for descendant elements. Note that content can go outside the principal block box; for example, when content overflows its block, or list item markers, which are placed in the margin of the box.

Bugs

All browsers have some problems with box properties. If all you want to do is give the BODY a left, right and bottom margin you will be OK. Beyond this, you may have problems, the most notable of which I detail below.

IE 3.00 interprets all margins as relative to the left of the page rather than the left of the element. This means negative horizontal margins will obscure content, and as a rule of thumb, left margins should only be set on BODY.

Netscape 4.* does not support border-top, border-left, etc., so use border-(top/left/right/bottom)-width, border-width or border, etc.

Box shorthands

The box shorthand property allow you to specify the box style for all four sides at once.

If one number is supplied in a shorthand, it is applied to all four sides; if two numbers, the first number to the top and bottom sides, and the second to the right and left; if three numbers, the first number to the top side, the second to the right and left sides, and the third to the bottom side; if four numbers, to the top, right, bottom, and left sides in that order.

Thus by these rules P {margin: 10px 5px} is applied as a 10 pixel vertical and 5 pixel horizontal margin.

Margin

These are defined by the margin-left, margin-right, margin-top, margin-bottom properties.

The margin can be specified in any length, a percentage, or using the auto keyword. The percentage refers to the width of the containing block, regardless of whether it is applied to the left and right or top and bottom margins.

In addition, the margins can be specified for all four sides at once with the margin shorthand. Margins can be negative, and initially margins are 0.

It is important to note that in CSS, margins collapse vertically (except where one or more of the margins is a floating margin). This means that where two margins adjoin vertically, the margin is not equal to the combined total of the two margins, but rather to the larger of the two (except where both margins are negative, in which case the combined margin is equal to the most negative of the two margins; and where one margin is negative and the other positive, the combined margin is equal to the two margins added together). However, margins between floated or positioned elements and any other element do not collapse.

Margin examples

This would give P a top margin of one pixel, a right margin of 2 inches, a bottom margin of 3 cm and a left margin of 4 points.

Padding

Padding differs from margins insofar as padding does not collapse. In addition, although it is usually impossible to distinguish between padding and margin on the screen, padding is of crucial importance when an element has a rendered border, such as in a table or box, or where the element has a different background color from its parent.

As before, padding-left, padding-right, padding-top, padding-bottom or the padding shortcut can all be specified. If a percentage is specified, it relates to the width of the containing block.

Padding cannot be negative, and initially padding is 0, although browsers' built-in style sheets may increase this for certain elements.

Border

The border width is specified with border-bottom-width, border-top-width, border-left-width, border-right-width, or the border-width shorthand, which allows specification of 1-4 widths, applied according to the rules stated under Box shorthands.

It should be noted that percentages cannot be specified and nor can negative lengths, and that width can be alternatively (rather than as a length) be specified as thin, thick or medium, where medium is the initial value.

Border styles are specified using border-left-style, border-right-style, border-bottom-style, border-top-style and border-style. Valid border styles are none, hidden (same as none except on tables), dotted, dashed, solid, double (two lines), groove (the border appears to be carved into the screen), ridge (the border appears to be coming out of the screen), inset (the entire box appears to be carved into the screen), or outset (the entire box appears to be coming out of the screen).

Initially the border-style is set to none, so if you fail to override this, no border will be drawn.

You can specify up to four border styles, which are applied according to the rules stated above under Box Shorthands.

Note that if border-style: none (i.e., if border-style: none is not specifically overridden), this overrides any specified border-width, and makes them 0.

You can also specify a color with border-left-color, border-right-color, border-top-color, border-bottom-color or border-color. You can specify up to four colors, which are applied according to the rules stated above under Box Shorthands or transparent. Initially the border color is set to the element's color.

You can set the border style, color and width simultaneously with the border-left, border-right, border-bottom, border-top or border shorthands. It should be noted that only one of each can be specified - if you use the border shortcut, you are giving each side the same width of border, the same color and the same style.

BODY {border-left: thick} /* Since border style has not been specified, this would result in no border. */

RichInStyle.com CSS1 tutorial - the box model

Contents

Box model