Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

CSS Box Model

CSS Padding

Written by Updated

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

PropertyDescriptionExample
paddingSets padding on all sidespadding: 10px;
padding-topSets top paddingpadding-top: 20px;
padding-rightSets right paddingpadding-right: 15px;
padding-bottomSets bottom paddingpadding-bottom: 25px;
padding-leftSets left paddingpadding-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
padding11211

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.

PreviousCSS MarginNextCSS Border