CSS Padding

CSS padding is used to create space between the content of an HTML element and its border.

Padding is inside the element. It makes the content more comfortable to read and prevents the content from touching the border directly.

Basic Syntax

selector {
    padding: value;
}

Padding Diagram

Simple Explanation

Example 1: Basic Padding

The following example adds 20px of padding on all four sides of the element.

.box {
    background-color: lightblue;
    border: 2px solid blue;
    padding: 20px;
}

Output

Example 2: Padding on Individual Sides

CSS allows you to control padding separately for the top, right, bottom, and left sides.

.box {
    background-color: lightgreen;
    border: 2px solid green;

    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}

Output

Example 3: Padding Shorthand

Instead of writing four separate properties, you can use the padding shorthand property.

.box {
    background-color: lightyellow;
    border: 2px solid orange;
    padding: 10px 20px 30px 40px;
}

Output

Padding Shorthand Rule

When four values are provided, CSS follows the clockwise direction:

padding: 10px 20px 30px 40px;

/*
Top    = 10px
Right  = 20px
Bottom = 30px
Left   = 40px
*/

Two-Value Padding

When two values are used, the first value applies to the top and bottom, while the second value applies to the left and right.

.box {
    background-color: #e9d5ff;
    border: 2px solid purple;
    padding: 15px 30px;
}

Output

Padding Properties

Padding vs Margin