Web Design in a Nutshell, 3rd Edition

The Shorthand margin Property

As an alternative to setting margins one side at a time, there is the shorthand margin property. The accepted values are the same as those previously listed. What changes slightly is the syntax as the margin property provides a lot of flexibility for specifying values.

In the values listed for margin above, the {1,4} notation means that you can provide one, two, three, or four values for a single margin property. Here’s how it works.

When you provide four values, the values are applied around the edges of the element in clockwise order, like this (some people use the mnemonic device “TRouBLe” for the order Top, Right, Bottom, Left):

    { margin: top right bottom left }

The four margin properties listed in Figure 19-4 could be condensed using the margin property as so:

    { margin: 3px 20px 3px 20px; }

When one or more of the four values is missing, certain provided values are replicated for the missing values.

If three values are provided, it is assumed the value for the left margin is missing, so the value for right is used for left ({margin: top right/left bottom}). This rule, therefore, is equivalent to the previous example:

    { margin: 3px 20px 3px; }

If two values are provided, the right value is replicated for the missing left value, and the top value is replicated for the missing bottom value ({margin: top/bottom right/left}). Again, the same effect achieved by the previous two examples could be accomplished with this rule:

    { margin: 3px 20px; }

Finally, if ...