CSS Padding

CSS has properties for specifying the padding for each side of an element: padding-top, padding-right, padding-bottom, and padding-left.

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Padding Shorthand Property

To shorten the code, it is possible to specify all the padding properties in one property. The padding property is a shorthand property for this. The order is top, right, bottom, left.

div {
  padding: 25px 50px 75px 100px; /* top, right, bottom, left */
}

Padding and Element Width

By default, the CSS width property specifies the width of the content area. If an element has padding, the padding is added to the total width of the element. This can often be an undesirable result. To keep the width at 300px, for example, regardless of padding, you can use the box-sizing: border-box; property.

div {
  width: 300px;
  padding: 25px;
  border: 1px solid black;
}
/* Total width will be 300px + 50px (left & right padding) */