CSS Box Model

CSS Padding

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.

👉 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;

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>

Output

Browser Output

html

<div>

Browser Support

Chrome	Firefox	Edge	Safari	Opera	IE9+
✅Yes	✅Yes	✅Yes	✅Yes	✅Yes	✅Yes

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 Margin NextCSS Border