A fifth property, padding, is used as a shortcut for the above four properties.

paddings can be specified in 3 ways: length, percentage, or auto. Let's take a look at an example:

#container {   padding-top:15px;   padding-left:5px;   padding-right:30px;   padding-bottom:40px;   border: 1px solid 000000; }

The following HTML

<div id="container"> This is an example for the padding </div>

renders the following:

This is an example for the padding

Notice the padding between the box and the top, left, bottom, and right of the light green area are 15px, 5px, 40px, and 30px, respectively.

padding shortcuts

All four paddings can be specified on a single line using the "padding" property. The syntax is as follows:

padding: [padding-top] [padding-right] [padding-bottom] [padding-left]

The order is very important here. The first element is always the top padding, the second is always the right padding, the third is always the bottom padding, and the fourth is always the left padding.