CSS padding-top Property

The padding-top property in CSS is used to set the amount of padding added to the top of an element. It has the following syntax:

padding-top: [value];

where [value] can be specified either in length or in percentages. When specified in percentages, it is the percentage of the width of the element. The default value for padding-top is 0, and [value] can never be a negative number.

Example 1

#container1 {   padding-top:20px;   border: 1px solid 000000; }

The following HTML

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

renders the following:

Example of CSS padding-top property using length

Notice the top padding the text and the top of the light green area is 20px. The right, left, and bottom paddings are all 0.

Example 2

#container2 {   padding-top:18%;   border: 1px solid 000000; }

The following HTML

<div id="container2"> Example of CSS padding-top property using percentages </div>

renders the following:

Example of CSS padding-top property using percentages

Notice the top padding the text and the top of the light green area is 18% of the width. The right, left, and bottom paddings are all 0.

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