CSS padding-bottom Property

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

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

Example 1

#container1 {   padding-bottom:35px;   border: 1px solid 000000; }

The following HTML

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

renders the following:

Example of CSS padding-bottom property using length

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

Example 2

#container2 {   padding-bottom:25%;   border: 1px solid 000000; }

The following HTML

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

renders the following:

Example of CSS padding-bottom property using percentages

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