In order to access this site you need to enable JavaScript!

You are here: Reference > CSS > properties > padding-bottom

padding-bottom property

Browser support:

Specifies the space between an element's bottom border and its contents.

With the padding-bottom property you can specify the distance between the bottom border-bottom and the element's content.

JavaScript page for this property: paddingBottom. You can find other example(s) there.

Possible values:

One of the following values:

inherit

Takes the value of this property from the computed style of the parent element.

space in non-negative length

The space in length units. For the supported length units, see the length page.

space in non-negative percentage

The space is the specified percentage of the width of the parent element.

Default: 0.

Example HTML code 1:

This example illustrates the use of the padding-bottom, border and margin properties:

<head>
    <style>
        .outer {
            border: 1px solid #ffffff;
            background-color: #ffb08a;
        }
        .middle {
            margin: 20px;
            padding-bottom: 20px;
            border: 10px solid #000000;
            background-color: #ceb379;
        }
        .inner {
            height: 10px;
            border: 1px solid #ffffff;
            background-color: #ffffff;
        }
    </style>
</head>
<body>
    <table cellpadding="0px" cellspacing="10px">
        <tr>
            <td style="background-color: #ffb08a;">&nbsp;</td>
            <td>margin</td>
            <td style="background-color: #000000;">&nbsp;</td>
            <td>border</td>
            <td style="background-color: #ceb379;">&nbsp;</td>
            <td>padding</td>
        </tr>
    </table>
    
    <div class="outer">
        <div class="middle">
            <div class="inner"></div>
        </div>
    </div>
</body>