CSS padding-bottom Property
An element’s padding is the space between its content and its border. The padding-bottom CSS property is used to set the height of the padding area on the bottom of an element.
Syntax:
padding-bottom: length|percentage;
Property values:
- length: This value is used to specify the size of padding as a fixed value. The default value is 0. It must be non-negative.
- percentage: This type of value is used to specify the bottom padding in percent of the width of the element. It must be non-negative.
Example 1: In this example, we are using padding-bottom: length; property.
html
<!DOCTYPE html> < html > < head > < title >CSS padding-bottom Property</ title > < style > p.geek { padding-bottom: 35px; color: white; background: green; } </ style > </ head > < body style = "text-align: center;" > < h1 style = "color: green;" >w3wiki</ h1 > < h2 >padding-bottom Property</ h2 > <!-- Below paragraph element has a padding-bottom of 35px --> < p class = "geek" > This paragraph has a padding-bottom: 35px; </ p > </ body > </ html > |
Output:
Example 2: In this example, we are using padding-bottom: percentage; property.
html
<!DOCTYPE html> < html > < head > < title >CSS padding-bottom Property</ title > < style > p.geek { padding-bottom: 10%; color: white; background: green; } </ style > </ head > < body style = "text-align: center;" > < h1 style = "color: green;" >w3wiki</ h1 > < h2 >padding-bottom Property</ h2 > <!-- Below Paragraph element has a padding-bottom of 10% --> < p class = "geek" > This paragraph has a padding-bottom: 10%; </ p > </ body > </ html > |
Output:
Supported Browsers: The browser supported by padding-bottom property are listed below:
- Google Chrome 1.0 and above
- Edge 12.0 and above
- Internet Explorer 4.0 and above
- Firefox 1.0 and above
- Opera 3.5 and above
- Apple Safari 1.0 and above
Contact Us