CSS Padding

CSS padding is the space between an element's content and its border. Padding can be set using the padding property and can take up to four values, one for each side of the element: top, right, bottom, and left. The values can be set using pixels, percentage, or the keyword inherit.

Here is an example of how to use the padding property to set the padding for all four sides of an element:

element {
  padding: 10px; /* sets 10px of padding on all four sides */
}

You can also set the padding for each side individually:

element {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 5px;
  padding-left: 15px;
}

You can also set the padding for all 4 sides in one line like this:

element {
  padding: 10px 20px 5px 15px; /* sets 10px of padding on top, 20px on right, 5px on bottom, and 15px on left */
}

Padding Properties Values

The padding property in CSS can take several different types of values, including:

Length values: These are values that are specified in pixels px, ems em, or rems rem. For example, you can set the padding to 10px, 1em, or 2rem.

element {
  padding: 10px; /* sets 10px of padding on all four sides */
}

Percentage values: These are values that are specified as a percentage of the width of the containing element. For example, you can set the padding to 10%, 20%, or 50%.

element {
  padding: 10%; /* sets 10% of the containing element's width as padding on all four sides */
}

Keywords: The keyword value inherit can be used to inherit the padding value of the parent element.

#parent {
  padding: 10px;
}
#child {
  padding: inherit; /* inherits the padding value of the parent element */
}

Initial: The initial value sets the padding to the default value which is 0.

element {
  padding: initial; /* sets padding to 0 */
}

Unset: The unset value sets the padding to the value set by the parent element. If there is no value set by the parent element, it will be the same as setting it to initial.

#parent {
  padding: 10px;
}
#child {
  padding: unset; /* sets the padding to the value set by the parent element */
}

Padding and Element Width

When setting the padding and width of an element, it's important to keep in mind that the total width of the element will be the sum of the width, left padding, and right padding.

This means that if you set the width of an element to a certain value, and then add left and right padding, the total width of the element will be greater than the value you set for the width.

For example, if you set the width of an element to 100px and add 10px of left padding and 20px of right padding, the total width of the element will be 130px (100px + 10px + 20px).

To ensure that the total width of the element stays the same, you can set the box-sizing property to "border-box". This tells the browser to include the padding and border in the total width and height of the element.

element {
  width: 100px;
  padding: 0 20px;
  box-sizing: border-box;
}

The above code will maintain the width of the element to 100px even with the added padding.

Another alternative to this is to use the calc() function to calculate the width of an element. This can be useful when you want to set the width of an element to a percentage of its parent element, but also add padding.

#parent {
  width: 100%;
}
#child {
  width: calc(100% - 40px); /* width of child element is 100% of parent element minus 40px (20px left padding + 20px right padding) */
  padding: 0 20px;
}

In this way, you can make sure that the total width of the element stays the same, regardless of the padding added.

CSS Basics