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;">GeeksforGeeks</h1>
<h2>padding-bottom Property</h2>
<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;">GeeksforGeeks</h1>
<h2>padding-bottom Property</h2>
<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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!