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

CSS Style Examples