CSS Padding

In this tutorial, we will learn about CSS Padding. The CSS padding property is used to add some empty space around the HTML element. CSS padding works from outside to inside means CSS padding defines the space between an HTML element and its border. you can set the padding for each side (top, right, bottom, and left) separately or you can set padding to all four sides together.

Setting Padding Individual Sides:

There are four CSS properties to set the padding for each side. These are as follow:

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

div {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 25px;
  padding-left: 25px;
}

In padding properties we can use the following values:

• auto – the browser automatically calculates the padding for an element.
• length – use simple px, pt, cm, values to mention padding.
• % – specifies padding in % of the element.
• inherit – it means padding should be inherited from the parent element.

div {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: auto;
  padding-left: auto;
}

Shorthand Padding Property:

Shorthand padding property used to specify the padding for all four sides in a single line. Please check the following example:

div {
  padding: 15px 20px 30px 25px;
  /* top padding is 15px */
  /* right padding is 20px */
  /* bottom paddingis 30px */
  /* left padding is 25px */
}

CSS padding property with three values:

div {
  padding: 15px 20px 25px;
  /* top padding is 15px */
  /* right and left padding are 20px */
  /* bottom padding is 25px */
}

CSS padding property with two values:

div {
  padding: 15px 20px;
  /* top and bottom padding are 15px */
  /* right and left padding are 20px */
}

CSS padding property with a single value:

div {
  padding: 15px;
  /* padding of all four sides is 15px */
}