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;">        
    // Or you can write a style with different padding on each side     
    // Padding in percentage
    <div style="padding:10%;">            

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