Tutorial Article

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 spacingPadding = inside spacing 👉 This adds 20px space inside the element on all sides. Attributes […]

Apr 2, 2026CSSCSS Box ModelTutorials

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

selector {
    padding: value;
}

Example

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

<!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

The <div> will have space inside it (20px on all sides)
The content inside the div will not touch the border
The <p> will have extra space on the left side
Overall layout will look more spaced and readable

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:
- padding: 10px 20px;
- padding: 10px 15px 20px 25px;
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.