CSS padding-left Property

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

padding-left: [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-left is 0, and [value] can never be a negative number.

Example 1

#container1 {   padding-left:50px;   border: 1px solid 000000; }

The following HTML

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

renders the following:

Example of CSS padding-left property using length

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

Example 2

#container2 {   padding-left:30%;   border: 1px solid 000000; }

The following HTML

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

renders the following:

Example of CSS padding-left property using percentages

Notice the left padding the text and the left of the light green area is 30% of the width. The top, bottom, and right 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