Padding in CSS - Internal Spacing

The CSS padding property is used to create space around the element's content.

Padding is the space between the content and the border of an element.

Using padding property we can specify top, bottom, left and right padding independently.

CSS padding properties

There are 4 padding properties for each side of an element and a shorthand property for all 4 sides.

CSS padding values

padding-top

The padding-top property is used to set the padding on the top of an element.

Setting padding-top 20px will create 20px of space between top border and content.

.box {
    padding-top: 20px;
}

padding-right

The padding-right property is used to set the padding on the right of an element.

Setting padding-right 20px will create 20px of space between right border and content.

.box {
    padding-right: 20px;
}

padding-bottom

The padding-bottom property is used to set the padding on the bottom of an element.

Setting padding-bottom 20px will create 20px of space between bottom border and content.

.box {
    padding-bottom: 20px;
}

padding-left

The padding-left property is used to set the padding on the left of an element.

Setting padding-left 20px will create 20px of space between left border and content.

.box {
    padding-left: 20px;
}

padding (shorthand)

The padding property is used to set the padding on all four sides of an element.

This is a shorthand property for padding-top, padding-right, padding-bottom, and padding-left properties.

It accepts 4 different sets of values.

1. If you specify only one value, it will be applied to all four sides.

   For example, padding: 20px; - top, right, bottom and left padding will be 20px.

2. If you specify two values, the first value will be applied to the top and bottom, and the second value will be applied to the left and right.

   For example, padding: 20px 10px; - top and bottom padding will be 20px, and left and right padding will be 10px.

3. If you specify three values, the first value will be applied to the top, the second value will be applied to the left and right, and the third value will be applied to the bottom.

   For example, padding: 20px 10px 30px; - top padding will be 20px, left and right padding will be 10px, and bottom padding will be 30px.

4. If you specify four values, they will be applied to the top, right, bottom and left, respectively.

   For example, padding: 20px 10px 30px 40px; - top padding will be 20px, right padding will be 10px, bottom padding will be 30px, and left padding will be 40px.

.box1 {
    padding: 20px;
    /* top, right, bottom, left */
}

.box2 {
    padding: 20px 10px;
    /* top and bottom | left and right */
}

.box3 {
    padding: 20px 10px 30px;
    /* top | left and right | bottom */
}

.box4 {
    padding: 20px 10px 30px 40px;
    /* top | right | bottom | left */
}