Web Design in a Nutshell

Name

margin

Values:

length | percentage |auto

Example:

IMG { margin: 20px }

IMG { margin: 0px 12px 0px 12px }

IMG { margin: 0px 12px }

Applies to:

All elements

Inherited:

No

This is a shorthand property for specifying all the margins of an element. Values can be entered as length units, as a percentage based on the size of the element’s overall box width, or as auto, which automatically fills in a margin amount based on other elements on the page.

If a single value is given, as in the first example, that value will apply to the margins on all four sides of the box.

You can combine values for each of the four sides in a list, as shown in the second example. It is important to note that the values always follow a clockwise order, as follows:

{ margin: top right bottom left }

(Note that the second example duplicates the four separate rules illustrated for the margin-top, etc. properties.)

When you specify three values, the second value will apply to both the right and left margins:

{ margin: top right/left bottom }

Two values, as shown in the third example, are interpreted as follows:

{ margin: top/bottom right/left }

(Note that the third example has the same effect as the second example.)

If the browser doesn’t find a value for the left margin, it just duplicates the value for the right; if the bottom margin value is missing, it duplicates the value for the top.