CSS padding-bottom Property



CSS Tutorial  >  Padding  >  padding-bottom

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

PropertyUsage
paddingSpecifies the amount of padding on all four sides of an element
padding-bottomSpecifies the bottom padding of an element
padding-leftSpecifies the left padding of an element
padding-rightSpecifies the right padding of an element
padding-topSpecifies the top padding of an element

Next: CSS padding-left Property




Copyright © 2017   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact