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>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content