CSS Padding

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

Paddings can be specified in two ways: length and percentage. If no value is specified, the default is 0. It is important to note that no negative values can be used for padding.

Example 1

CSS declaration:

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

The following HTML,

<div id="container1"> Example of CSS padding using length </div>

renders the following:

Example of CSS padding using length

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

Example 2

CSS declaration:

#container2 {   padding-top:15%;   padding-left:5%;   padding-right:30%;   padding-bottom:20%;   border: 1px solid 000000; }

The following HTML,

<div id="container2"> Example of CSS padding using percentage </div>

renders the following:

Example of CSS padding using percentage

Notice the padding between the text and the top, left, bottom, and right of the light green area are 15%, 5%, 20%, and 30% of the width, respectively. When using percentage with padding in this way, the percentage is expressed in terms of the width, not the height, of the box.

Padding order

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. If this seems hard to memorize, just remember that you start from the top and go clockwise.

When only three values are specified, the first value refers to the top padding, the second value refers to the left padding and the right padding, and the third value refers to the bottom padding.

When only two values are specified, the first value refers to the top padding and the bottom padding, and the second value refers to the left padding and the right padding.

When only one value is specified, it refers to all four sides.

Example 3

CSS declaration:

#container3 { padding: 15px 2em 30px 5%; }

means #container3 has the following properties:

• padding-top: 15px
• padding-right: 2em
• padding-bottom: 30px
• padding-left: 5%

Note here that it is permissible to specify values in both legnth and percentage in the same padding declaration.

Example 4

CSS declaration:

#container4 { padding: 30px 10em 20px; }

means #container4 has the following properties:

• padding-top: 30px
• padding-right: 10em
• padding-bottom: 20px
• padding-left: 10em

Example 5

CSS declaration:

#container5 { padding: 10px 5px; }

means #container5 has the following properties:

• padding-top: 10px
• padding-right: 5px
• padding-bottom: 10px
• padding-left: 5px

Example 6

CSS declaration:

#container6 { padding: 30em; }

means #container6 has the following properties:

• padding-top: 30em
• padding-right: 30em
• padding-bottom: 30em
• padding-left: 30em

List of padding properties

Property	Usage
padding	Specifies the amount of padding on all four sides of an element
padding-bottom	Specifies the bottom padding of an element
padding-left	Specifies the left padding of an element
padding-right	Specifies the right padding of an element
padding-top	Specifies the top padding of an element