Using the Padding Property

By using the padding property, you can set all four padding lengths at once. Here's how it works:

• If only one value is set on this property, that value applies to all four sides.

• If two or three values are set, the missing value(s) are taken from the opposite side(s). For example, suppose the top is set to 3em, the right to 2em, and no values are assigned to the bottom and left. The bottom is the opposite of the top, so it takes the value of the top: 3em. The left padding is the opposite of the right padding, so it takes the value of the right side: 2em.

• If four values are set on this property, the order they are applied is top, right, bottom, and left.

The following are examples of code for using the padding property in these various ways:

 /* All paddings will be 2em. */ BODY { padding: 2em } /* The top and bottom padding will be 1em,    and the right and left padding will be 2em. */ BODY { padding: 1em 2em } /* The top padding will be 1em, the right and left    will be 2 em, and the bottom padding will be 3em. */ BODY { padding: 1em 2em 3em } /* All paddings will be set, and values will    be applied in top/right/bottom/left order. */ BODY { padding: 1em 3em 5em 7em }