padding

Definition

The padding property is a shorthand property in CSS that allows you to set the padding space on all four sides of an element at once. Padding refers to the space between the content of an element and its border. The padding property sets the amount of space between the content of an element and its padding box.

Examples

Setting equal padding on all four sides of an element:

<div class="example-1">This is an example</div>
.example-1 {
  padding: 20px;
}

Setting different padding values for the top and bottom of an element:

<div class="example-2">This is an example</div>
.example-2 {
  padding: 10px 0;
}

Setting different padding values for all four sides of an element:

<div class="example-3">This is an example</div>
.example-3 {
  padding: 10px 20px 15px 5px;
}

Values

Best Practices

• Use padding to create space between an element's content and its border. This can improve the readability and visual appeal of your web page.
• Avoid using fixed padding values that are larger than the width or height of the containing block, as this can cause overflow issues.
• Consider using percentage values for padding to create responsive designs that adapt to different screen sizes and device orientations.
• Use the shorthand padding property to set padding on all four sides of an element. This can make your code more concise and easier to read.
• Avoid using padding as a substitute for margins, which are better suited for creating space between elements. Use padding to create space within an element, and use margins to create space between elements.

Browser Compatibility