CSS Property padding-top








padding-top sets the width of the top padding for an element.

Summary

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




CSS Syntax

padding-top: length | percentage | auto | inherit 

Property Values

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

Browser compatibility

padding-top Yes Yes Yes Yes Yes




Example

An example showing how to use padding-top CSS property.

<!DOCTYPE HTML>
<html>
    <head>
    <style>
    div {<!--from  w ww .j  av a  2  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