padding

The padding property sets the padding around a tag. The padding is the space between the tag’s content and the border (if it has one). This is set to zero unless you specify otherwise. For example:

 p {padding: 20px 10px 20px 10px;}

You can specify the padding in millimetres, centimetres, inches, points, picas, pixels, height of the font (em), or height of the letter x (ex) or as a percentage.

The order is top, right, bottom and left. If you specify a single value, the browser applies it to all four sides. If you enter two values, the first value applies to the top and bottom-padding and the second to the left and right-padding. If you enter three values, the first value applies to the top padding, the second to the left and right padding and the third to the bottom padding.

Instead of setting the padding properties together, you can use the padding-left, padding-right, padding-bottom and padding-top properties to set the padding for individual sides of a tag. For example:

body {padding-left: 10px;
      padding-right: 10px;
      padding-bottom: 20px;
      padding-top: 20px;}