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.

This paragraph has a padding of 50px from the border.

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.

PropertyDescription
padding-topSpecifies the padding on the top of an element.
padding-rightSpecifies the padding on the right of an element.
padding-bottomSpecifies the padding on the bottom of an element.
padding-leftSpecifies the padding on the left of an element.
paddingSpecifies the padding on all 4 sides of an element.

CSS padding values

ValuesDescription
lengthSpecifies the padding in px, cm, etc.
%Specifies the padding in the percentage of the width of the containing block.
initialSpecifies the padding to its default value.
inheritSpecifies the padding to be inherited from its parent element.

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.

Example

.box {
    padding-top: 20px;
}
Try it
CSS padding-top example
Change the values from options to see the effect.

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.

Example

.box {
    padding-right: 20px;
}
Try it
CSS padding-right example
Change the values from options to see the effect.

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.

Example

.box {
    padding-bottom: 20px;
}
Try it
CSS padding-bottom example
Change the values from options to see the effect.

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.

Example

.box {
    padding-left: 20px;
}
Try it
CSS padding-left example
Change the values from options to see the effect.

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.

Example

.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 */
}
Try it
CSS padding example
Change the values from options to see the effect.