CSS Padding

The CSS padding properties are used to generate space around an element's content, inside of any defined borders.

CSS Padding

The CSS padding properties are used to generate space around an element's content, inside of any defined borders.

With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).

Example 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

This element has different padding on each side.

Example 2: Padding - Shorthand Property

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

padding: 25px 50px 75px 100px;
(top right bottom left)

Example 3: 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 be added to the total width of the element. This is often an undesirable result.

This div is 300px wide.

This div is 350px wide (300px + 25px left padding + 25px right padding).

Example 4: Box Sizing

To keep the width at 300px, no matter 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.

This div is 300px wide.

This div is also 300px wide, because box-sizing is set to border-box.

Example

div {
  padding: 25px 50px 75px 100px;
}

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