CSS Introduction | CSS Box Model | Padding

The padding property sets the size of the padding area, which is the space between the content and the border. This padding area is also affected by the background color set with the background-color property. With CSS, you can set the size of the padding area separately for each direction.

Padding Properties

CSS provides the following properties to set the padding area of an HTML element.

<style>
    div.pad {
        padding-top: 50px;
        padding-right: 10px;
        padding-bottom: 30px;
        padding-left: 100px;
    }
</style>

Padding Shorthand

You can set styles using all padding properties in one line.

<style>
    div.four { padding: 20px 50px 30px 50px; }
    div.three { padding: 20px 50px 30px; }
</style>

When four padding values are provided, they are set in the order top, right, bottom, left. Example: padding: 10px 20px 30px 40px;

This has the same meaning as the following four lines.

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

When three padding values are provided, they are set in the order top, right and left, bottom. Example: padding: 10px 20px 30px;

This has the same meaning as the following four lines.

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

When two padding values are provided, they are set in the order top and bottom, right and left. Example: padding: 10px 20px;

This has the same meaning as the following four lines.

padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;

When one padding value is provided, all padding values are set to the same value. Example: padding: 10px;

This has the same meaning as the following four lines.

padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;