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.
Syntax:
padding-bottom: length;
Example 1:
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;">GeeksforGeeks</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:
- 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.
Syntax:
padding-bottom: percentage;
Example 2:
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;">GeeksforGeeks</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
.png)
