CSS - Padding

About

The padding area is the space between the content of the box and its border.

In the below image, this are the areas:

• TP (top padding)
• BP (bottom padding)
• LP (left padding)
• RB (right padding)

This area is a part of the background.

Example

2 lengths / 2 axis

• The padding css for every paragraph element
  • top and bottom paddings are 10px,
  • right and left paddings are 20px.

p { 
    padding: 10px 20px; 
    /* same than 
    padding-top:10px; 
    padding-bottom:10px; 
    padding-right:20px; 
    padding-left:20px; 
    */
}

• Further styling of the p element
  • A background to show that the padding is part of the background
  • And the box border

p {
    background-color: skyblue; 
    border: 1px solid
}

• The HTML to style

<p>Lorem Ipsum</p>

• The result

3 lengths / 1 side - 1 axis - 1 side

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

p {
    padding: 10px 20px 30px; 
    /* same as
    padding-top: 10px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 30px;
    */
    background-color: skyblue; 
    border: 1px solid 
}

<p>Lorem Ipsum</p>

4 lengths / 4 sides

• top padding is 10px,
• right padding is 20px,
• bottom padding is 30px,
• left padding is 40px.

p { 
    padding: 10px 20px 30px 40px;
    background-color: skyblue; 
    border: 1px solid 
}

<p>Lorem Ipsum</p>

Usage

• Using a fix navigation bar, the padding top on the body element is set otherwise the fix bar will overlay the content
• Adding a gap between the background edge and the text know as a gutter

Syntax

This area is set:

• with the padding properties ^{1) 2)}:
  • padding-top (TP),
  • padding-right (RP),
  • padding-bottom (BP),
  • padding-left (LP)
• or with the shorthand padding to avoid setting each side separately.

padding properties cannot utilize negative length, margin can