Tech and Media Labs
This site uses cookies to improve the user experience.




CSS padding

Jakob Jenkov
Last update: 2014-08-11

As explained in the text about the CSS box model, an HTML element can have padding around it.

The padding of an HTML element is specified using the padding CSS properties. The padding CSS properties are:

  • padding
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

The padding CSS property values are specified in the same way as margins. Here is are three example CSS rules specifying the padding of some HTML elements:

#divOne {
    padding : 20px;
}

#divTwo {
    padding : 20px 10px 20px 10px;
}

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

The first of these CSS padding examples sets the padding on all four sides of the HTML element with the id divOne to 20 pixels. It does so by setting the value 20px for the padding CSS property.

The second example sets the top padding to 20 pixels, the right padding to 10 pixels, the bottom padding to 20 pixels and the left padding to 10 pixels. It does so by setting the padding CSS property to 20px 10px 20px 10px. The four values specify the top, right, bottom and left padding individually.

The third example sets the top padding to 20 pixels, the right padding to 10 pixels, the bottom padding to 20 pixels and the left padding to 10 pixels. It does so by setting each of the four CSS properties padding-top, padding-right, padding-bottom and padding-left separately.

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC