CSS padding-bottom Property

Q: How can I set a 20px padding at the bottom of an element?

To set a 20px padding at the bottom, use: padding-bottom: 20px;. This will create a 20px space between the content and the bottom border of the element.

Last Updated : 28 Aug, 2024

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.

<!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: paddingbottom

Example 2: In this example, 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>

Output:

paddingbottom

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

CSS padding-bottom Property – FAQs

What is the padding-bottom property in CSS?

The padding-bottom property in CSS sets the amount of space between the content of an element and its bottom edge. It adds extra space inside the element, increasing the distance between the content and the element’s border.

How can I set a 20px padding at the bottom of an element?

To set a 20px padding at the bottom, use: padding-bottom: 20px;. This will create a 20px space between the content and the bottom border of the element.

Does padding-bottom affect the width of an element?

No, padding-bottom does not affect the width of an element. It only impacts the vertical space inside the element at the bottom edge.

How does padding-bottom interact with margin-bottom?

Padding-bottom creates space inside the element, while margin-bottom creates space outside the element. They do not directly interact but can combine to increase the overall spacing between elements.