padding-bottom

Description

padding-bottom sets the width of the bottom padding.

ItemValue
Initial value 0
Inherited No.
Version CSS1
JavaScript syntax object.style.paddingBottom="2px"
Applies to All elements.

Syntax and Property Values


padding-bottom: length | percentage | auto | inherit

The property values are listed in the following table.

ValueDescription
auto Default value. The browser does the calculation.
length Set width in px, cm, etc.
% Set width in percent of the containing element
inherit Inherit the width property from the parent element

Example


<!DOCTYPE HTML>
<html>
    <head>
    <style>
    div {<!--   ww  w  .  ja  v a2 s.c o  m-->
        float: left;
        background: gold;
        margin: 5px;
        width: 250px;
    }
    div div {
        float: none;
        background: white;
        border: none;
        font: 10px sans-serif;
        color: rgb(200, 200, 200);
        width: auto;
    }
    div#properties {
        padding-top: 2px;
        padding-right: 4px;
        padding-bottom: 6px;
        padding-left: 8px;
    }
    div#four-values {   padding: 2px 4px 6px 8px; }
    div#three-values {  padding: 2px 8px 6px;     }
    div#two-values {    padding: 2px 8px;         }
    div#one-value {     padding: 2px;             }
    </style>
    </head>
    <body>
        <div id='properties'>
            <div>
                Lorem ipsum dolor sit amet, consectetuer
                Nulla bibendum eros sit amet lectus. Nunc
                interdum ut, congue ut, scelerisque quis
            </div>
        </div>
        <div id='four-values'>
            <div>
                Lorem ipsum dolor sit amet, consectetuer
                Nulla bibendum eros sit amet lectus. Nunc
                interdum ut, congue ut, scelerisque quis.
            </div>
        </div>
        <div id='three-values'>
            <div>
                Lorem ipsum dolor sit amet, consectetuer
                Nulla bibendum eros sit amet lectus. Nunc
                interdum ut, congue ut, scelerisque quis.
            </div>
        </div>
        <div id='two-values'>
            <div>
                Lorem ipsum dolor sit amet, consectetuer
                Nulla bibendum eros sit amet lectus. Nunc
                interdum ut, congue ut, scelerisque quis.
            </div>
        </div>
        <div id='one-value'>
            <div>
                Lorem ipsum dolor sit amet, consectetuer
                Nulla bibendum eros sit amet lectus. Nunc,
                interdum ut, congue ut, scelerisque quis.
            </div>
        </div>
    </body>
</html>

Click to view the demo

The code above generates the following result.

padding-bottom




















Home »
  HTML CSS »
    HTML CSS Reference »




HTML Tag Reference
CSS Reference
CSS Selector Reference
Encoding Reference