A Complete Guide to Web Design

Properties 409

CSS

Properties

Web Design in a Nutshell, eMatter Edition

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 clock-

wise order, as follows:

{ margin: top right bottom left }

(Note that the second example duplicates the four separate rules illustrated for

themargin-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.

padding-top, padding-right, padding-bottom, padding-left

Values:
length|percentage

Example:
P.sidebar { padding-top: 1em }

Applies to:
All elements

Inherited:
No
These properties specify an amount of padding to be added around the
respective sides of an element’s contents (as called by name). Values are the
same as explained for themargin property.

padding

Values:
length|percentage

Example:
P.sidebar { padding: 1em }

Applies to:
All elements

Inherited:
No
This is a shorthand property for specifying the padding for all sides of an
element. A single value will apply the same amount of padding on all sides of