CSS - Padding

About

The padding area is the space between the content of the box and its border. This area is a part of the background.

For instance, using a fix navigation bar with bootstrap, the padding top on the body element is set otherwise the fix bar will overlay the content,

_

This area is set with the padding properties:

  • padding-top (TP),
  • padding-right (RP),
  • padding-bottom (BP),
  • padding-left (LP)

The padding property is a shorthand to avoid setting each side separately.

Example

  • top and bottom paddings are 10px, right and left paddings are 20px.
padding: 10px 20px;
  • top padding is 10px, right and left paddings are 20px, bottom padding is 30px.
padding: 10px 20px 30px;
  • top padding is 10px, right padding is 20px, bottom padding is 30px, left padding is 40px.
padding: 10px 20px 30px 40px;

Documentation / Reference


Powered by ComboStrap