Padding

In CSS, padding refers to the inner spacing of an element.

Padding creates space between the content of an element (such as text, images, etc.) and the border of that element.

Unlike margins, padding affects the actual size of an HTML element.

That is, adding padding can increase the overall size of the HTML element.

Padding can be applied in the following ways.

By entering a single number for the padding property, you can set the same spacing on all sides.

Copy
.box {
  /* Set 20px of inner spacing on all sides */
  padding: 20px;
}

Padding can be set sequentially for the top, right, bottom, and left sides.

Copy
.box {
  /* Set padding in the order of top, right, bottom, left */
  padding: 10px 15px 20px 25px;
}

The padding-top, padding-right, padding-bottom, padding-left properties can be used to set padding on one side at a time.

Copy
.box {
  padding-top: 10px; /* Top inner spacing */
  padding-right: 15px; /* Right inner spacing */
  padding-bottom: 20px; /* Bottom inner spacing */
  padding-left: 25px; /* Left inner spacing */
}

Padding affects the overall size of an element.

For example, if you add padding: 10px to a box that is 100px by 100px, the overall size of the box increases to 120px by 120px.

This happens because 10px of inner spacing is added on all sides.

To prevent such an increase, you can use box-sizing: border-box; to ensure that padding does not affect the overall size of the element.

In the above example, if you add box-sizing: border-box; to the CSS for a 100px box, even with an additional 10px of padding, the overall size of the box remains 100px by 100px.

Copy
.box {
  box-sizing: border-box;
}