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:
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 |
Next: CSS padding-left Property
Copyright © 2022 1keydata.com All Rights Reserved Privacy Policy
About Contact |