CSS Padding

Padding is used to create space around an element's content, inside of any defined borders.

1. Padding - Individual Sides

CSS has properties for specifying the padding for each side of an element:

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

2. Padding - Shorthand Property

To shorten the code, it is possible to specify all the padding properties in one property.

Four values: padding: 25px 50px 75px 100px;

• top: 25px
• right: 50px
• bottom: 75px
• left: 100px

Three values: padding: 25px 50px 75px;

• top: 25px
• right/left: 50px
• bottom: 75px

Two values: padding: 25px 50px;

• top/bottom: 25px
• right/left: 50px

One value: padding: 25px;

• all four paddings are 25px

Padding and Element Width

The CSS width property specifies the width of the element's content area. The content area is the portion inside the padding, border, and margin of an element (the Box Model). So, if an element has a specified width, the padding added to that element will add to the total width of the element. This is often an undesirable result.

Solution: box-sizing To keep the width at specific whatever the amount of padding, you can use the box-sizing property. This causes the element to maintain its width; if you increase the padding, the available content space will decrease.

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}