CSS Property padding








padding shorthand property sets the width of the overall padding or sets the widths of each individual side padding. Padding can never be negative.

Summary

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




CSS Syntax

padding: padding1 [... padding4] | inherit 

padding can have one to four values.

padding:10px 5px 15px 20px;
  • top padding is 10px
  • right padding is 5px
  • bottom padding is 15px
  • left padding is 20px
padding:10px 5px 15px;
  • top padding is 10px
  • right and left padding are 5px
  • bottom padding is 15px
padding:10px 5px;
  • top and bottom padding are 10px
  • right and left padding are 5px
padding:10px;
  • all four paddings are 10px.




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 Yes Yes Yes Yes Yes

Example

An example showing how to use padding CSS property.

<!DOCTYPE HTML>
<html>
    <head>
    <style>
    div {<!--from   www . jav a 2 s .c  om-->
        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, tellus.
            </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, tellus.
            </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, tellus.
            </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, tellus.
            </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, tellus.
            </div>
        </div>
    </body>
</html>

Click to view the demo