The padding-bottom property in CSS is used to add space between the content and the bottom border of an element. It helps create proper spacing and improves the layout design.
- It sets the height of the bottom padding area of an element.
- Padding is the space between the content and the border.
- The value can be specified using units like px, %, or em.
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: Here, we are using padding-bottom: length; property.
<!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>
Example 2: Here, we are using padding-bottom: percentage; property.
<!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>