CSS Padding Property Style

In CSS padding properties are used to create space around an html element, most of the time padding is used for <div>, <p>, <span>, but it can go with any other element.

Setting Padding each side of DIV

CSS has properties for creating padding space for each side of any element.

• padding-left
• padding-right
• padding-bottom
• padding-top

Any Padding property can have the following values:

• % - indicate padding in % of the width of container
• length - specifies a fix padding in px, pt, cm, etc.

Padding Example

    <div style="padding:10px;">        
    </div>
       
    // Or you can write a style with different padding on each side     
    <style>
    .pc
    {
    padding-left:10px;
    padding-right:15px;
    padding-top:8px;
    padding-top:6px;
    }
    </style>
    // Padding in percentage
    <div style="padding:10%;">            
    </div>

Another way to write it

div {
    padding: 15px 40px 100px 10px;
}

Above indicate
top padding is 15px
right padding is 40px
bottom padding is 100px
left padding is 10px