CSS - Padding

> (World Wide) Web - (W3|WWW) > CSS - Cascading Style Sheets - Markup Language (HTML|XML) Skin > CSS - Boxes (Box Model)

1 - 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.

Advertising

3 - 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;

4 - Documentation / Reference

web/css/box/padding.txt · Last modified: 2019/06/20 14:29 by gerardnico