What is the CSS property to specify the space between the content of an element and its border?

Question

Aryan Kumar · Answer

The CSS property to specify the space between the content of an element and its border is padding. The padding property can be used to add space to all four sides of an element, or to specific sides of an element.

The padding property is a shorthand property for the following properties:

padding-top
padding-right
padding-bottom
padding-left

For example, the following CSS code will add 10 pixels of padding to all four sides of an element:

Code snippet

element {
  padding: 10px;
}

The following CSS code will add 10 pixels of padding to the top and bottom of an element, and 20 pixels of padding to the left and right of an element:

Code snippet

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

The padding property can also be used to add different amounts of padding to different sides of an element. For example, the following CSS code will add 10 pixels of padding to the top and bottom of an element, and 20 pixels of padding to the left and right of an element:

Code snippet

element {
  padding: 10px 20px;
}

The padding property can be used to create a variety of effects, such as adding a border around an element, or creating a space between the content of an element and its border.

Here are some additional tips for using the padding property:

Use the same value for all four sides of an element to create a uniform border.
Use different values for different sides of an element to create a more asymmetrical border.
Use the padding property to create a space between the content of an element and its border.

By following these tips, you can use the padding property to create a variety of effects in your CSS code.

forum

What is the CSS property to specify the space between the content of an element and its border?

Can you answer this question?

1 Answers