padding

Definition

The padding CSS property is used to set the space between the content of an element and its border. It defines the distance between the element’s content and the edges of its padding box.

The padding property accepts one to four values, which represent the padding for the top, right, bottom, and left sides of the element, respectively. You can specify the values using length units (such as pixels or percentages) or the auto keyword.

Here’s an example:

.box {
  padding: 10px;
}

In this example, the .box class sets a padding of 10px on all sides of the element. This creates a uniform space between the content and the element’s border.

You can also specify different paddings for each side individually:

.box {
  padding-top: 20px;
  padding-right: 10px;
  padding-bottom: 30px;
  padding-left: 15px;
}

In this case, the .box class sets a 20px top padding, 10px right padding, 30px bottom padding, and 15px left padding.

The padding property is commonly used to create space around the content of an element, providing visual separation and improving readability. It helps in maintaining proper spacing and alignment within a layout.