CSS Documentation

Padding

Menu

CSS Padding

CSS padding is used to create space around an element's content, inside of any defined borders. It's an essential property for controlling the layout and spacing of elements on a web page.

Padding Properties

  • padding-top: Sets the top padding of an element.
  • padding-right: Sets the right padding of an element.
  • padding-bottom: Sets the bottom padding of an element.
  • padding-left: Sets the left padding of an element.
  • padding: A shorthand property for setting all padding properties in one declaration.

Example

Here's an example of using different padding properties:

.padding-example {
ㅤpadding-top: 10px;
ㅤpadding-right: 20px;
ㅤpadding-bottom: 15px;
ㅤpadding-left: 25px;
}

.padding-shorthand {
ㅤpadding: 10px 20px 15px 25px;
}

Padding and Box Model

Padding is part of the CSS box model, which includes:

  • Content: The actual content of the box
  • Padding: Clears an area around the content (inside the border)
  • Border: Goes around the padding and content
  • Margin: Clears an area outside the border

Padding and Element Size

By default, padding increases the size of an element. You can use the box-sizing property to change this behavior:

.box-sizing-example {
ㅤbox-sizing: border-box;
ㅤwidth: 100px;
ㅤpadding: 20px;
}

Best Practices

  • Use consistent padding throughout your website for a cohesive design.
  • Consider using relative units (like em or %) for responsive design.
  • Be mindful of padding on smaller screens and adjust accordingly.
  • Use padding to create visual hierarchy and improve readability.
  • Remember that padding affects the clickable area of interactive elements.

Understanding and effectively using CSS padding is crucial for creating well-spaced, visually appealing layouts in web design.