CSS Padding Property Style

Padding indicate space inside the container, 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 like td etc.

padding: 10px 5px 2px 10px;

If you want to create best user experience and make sure your page content are reader-friendly, then we must use consistent padding for every paragraph.

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.

We can set different padding space in each side of container, you can specify either in percentage or in pixel.

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

The same padding in above code, we also can write differently like example below.

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 Margin space example

Define margin space around container, css margin example.

<style>
.div{
    margin-top:10px;
    margin-top:5px;
    margin-left:4px;
    margin-right:6px;
    }
    </style>

Any margin property can have the following values:

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

Margin can be set for each side as shown in above example, but if you don’t specify any side then margin will be applied to all the side like below example

<style>
.div{
        margin:10px;
}
</style>

Above style indicates 10px margin for each side of div.

You also can define css margin style of all sides like margin: 4px 2px 7px 4px;

• margin-top

  indicates the top margin of an html element

  .M1 {
      margin-top:10px;
  }
  

• margin-bottom

  indicates the bottom margin of an html element

  .M1 {
      margin-bottom: 10px;
  }
  

• margin-left

  indicates the left margin of an html element

  .M1 {
      margin-left: 5px;
  }
  

• margin-right

  indicates the right margin of an html element

  .M1 {
      margin-right: 5px;
  }
  

Css margin auto property will keep any div in centre of html page, this is very useful when you want to keep the layout in center of the screen.

<div style="width:50%;margin: 0 auto;">
            
</div>

Now if you place the above div element in html page, the div will remain in center of the page.

The difference between padding and margin is, padding defines the space within container and margin defines space outside the container.