CSS Box Model
CSS Padding
Control space between content and borders with shorthand, logical properties, percentages, and box-sizing-aware dimensions.
The CSS Padding property is used to create space inside an element, between the content and its border.
It helps improve readability and design by adding inner spacing, making content look less crowded. The supporting concepts are explained in CSS Margin and CSS Border.
👉 In simple terms:
Margin = outside spacing
Padding = inside spacing
Syntax
css
selector {
padding: value;
}Example
css
p {
padding: 20px;
}👉 This adds 20px space inside the element on all sides.
Attributes
| Property | Description | Example |
|---|---|---|
| padding | Sets padding on all sides | padding: 10px; |
| padding-top | Sets top padding | padding-top: 20px; |
| padding-right | Sets right padding | padding-right: 15px; |
| padding-bottom | Sets bottom padding | padding-bottom: 25px; |
| padding-left | Sets left padding | padding-left: 10px; |
Padding constraints
Padding cannot be negative, and percentage padding is resolved against the containing block's inline size-even for block-axis padding. Large padding can therefore create surprising height in fluid containers. Use logical shorthands such as padding-inline and padding-block for direction-aware components, and combine padding with border-box when a control must stay within a declared width.
Example
Complete CSS Padding Example
html
<!DOCTYPE html>
<html>
<head>
<title>CSS Padding Example</title>
<style>
div {
background-color: lightblue;
padding: 20px;
border: 2px solid black;
}
p {
background-color: yellow;
padding-left: 30px;
}
</style>
</head>
<body>
<div>This is a div with padding.</div>
<p>This paragraph has left padding.</p>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| padding | 1 | 12 | 1 | 1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
Notes
- Padding creates space inside the element
- It increases the total size of the element
- Supports shorthand:
<ul class="wp-block-list"><li>padding: 10px 20px;</li><li>padding: 10px 15px 20px 25px;</li></ul> - Background color is visible in padding area Works together with border and margin in the box model
Conclusion
CSS Padding is crucial for improving content spacing and readability. By adding space inside elements, it enhances design clarity and ensures a better user experience.