CSS, How to Padding Padding and more Padding

Monday, 24. August 2009

Padding can be applied to the outside edges of the content area of any block level or inline element. Padding creates the space between the edge of the element and its content.

Like margins, padding can be applied to individual sides of a box.

p {padding: 10px}
h1 {padding-top:0px}
h2 {padding-right:5px}
h2 {padding-bottom:7px}
h3 {padding-left:10px}

Padding can alse be applied using a single shorthand property. If one padding value is specified, it applies to all sides of an element:

p {padding:5px}

If two values are specified, the top and bottom margins are set to the first value and the right margins are set to the second:

p {padding: 5px 0}

If three values are specified, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third:

p {padding: 10px 0 20px}

If four values are specified, they apply to the top, right, bottom, and left:

p {padding 5px 0px 7px 15px}