CSS Padding

March 09, 2008
Padding in the CSS box model
Padding in the CSS box model

We've seen on the previous page how to draw a CSS border around an element. It's possible to control the space between the border and content by changing the so-called padding.

In fact, borders and paddings and part of the CSS box model. The picture on the right illustrates this concept. Every HTML element works this way.

Padding individual sides

You can change the padding of each element side separately by applying a length value to padding-top, padding-right, padding-bottom or padding-left.

CSS padding individual sides:

  • h2 {padding-top:2em; border:1px solid}
  • h3 {padding-right:2em; border:1px solid; text-align:right}
  • h4 {padding-bottom:2em; border:1px solid}
  • h5 {padding-left:2em; border:1px solid}

Display:

h2 with top padding
h3 with right padding
h4 with bottom padding
h5 with left padding

Padding all sides

Similar to the border shorthand notations you can change all paddings through a single padding rule.

CSS padding:

  • h2 {padding:1em; border:1px solid}
  • h3 {padding:1em 0; border:1px solid; text-align:justify}
  • h4 {padding:1em 0 2em; border:1px solid; text-align:justify}
  • h5 {padding:1em 2em 3em 4em; border:1px solid; text-align:justify}

Display:

h2 uses 1em padding for all 4 sides
h3 has 1em padding for the top and bottom and 0 padding for the left and right side
h4 has 1em padding for the top, 0 for the left and right side and 2em for the bottom
h5 uses a different padding for each side going from top to right, bottom and left