15 - CSS Margins & Padding

The space around the elements can be set using the CSS Margin properties.

There are four margin properties,

  • margin-top
  • margin-bottom
  • margin-left
  • margin-right

In addition to the above four properties, we also have a short hand property called “margin”.

Margin clears the area around an element the difference is that it takes care of the area outside the border.

The margins are transparent and cannot have any background colors.

The possible values for the properties above discussed are,

Possible Values for Margin

Value

Description

auto

Browser calculates the margin

length

Specifying a length in px, pt, cm etc. Default value is 0px.

%

Specifies margin in percent of the width of the element.

inherit

Specifies that the margin value must be inherited from its parent element.

 

 

 

 

 

Negative values are also allowed for this property to overlap the content.

Short Hand Margin Property

The margin property can have one to four values,

  • margin: 20px;

All four margins are 20 pixels.

  • margin: 20px 40px;

Top and bottom margins are 20px.

Left and right margins are 40px

  • margin: 20px 40px 60px;

Top margin is 20px

Left and right margins are 40px

Bottom margin is 60px

  • margin: 20px 40px 60px 100px;

Top margin is 20px

Right margin is 40px

Bottom margin is 40px

Left margin is 60px

An example program

<html>
  <head>
   <style type="text/css">
     div.no_margin {
      background-color:teal;
     }
    div.margin
    {   
     background-color: slategray;
     margin-top: 100px;
     margin-bottom: 100px;
     margin-right: 150px;
     margin-left: 50px;
    }
    div.short_margin
    {
     background-color:cyan;
     margin: 100px 150px 100px 50px;
    }
   </style>
  </head>
  <body>
    <div class="no_margin">
      <p>This paragraph has no margins</p>
    </div>
    <div class="margin">
     <p>This paragraph has margins</p>
    </div>
    <div class="short_margin">
     <p>This paragraph has margins set with Short hand "margin" property</p>
    </div>
  </body>
</html>

The output of the above program would be,

Padding

Padding is the space between element’s content and the element’s border.

Difference between padding and Margins

  • The difference between margin and padding is that margins talk about the space outside the border whereas the padding is the space inside the border.
  • Another difference is that we can apply background color to padding whereas background colors won’t work for margins.

There are four padding properties,

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

All the padding properties could be changed independently or a short hand “padding” property can be used to change all the values at once.

Possible Values for Padding

Value

Description

length

Specifying a length in px, pt, cm etc. Default value is 0px.

%

Specifies margin in percent of the width of the element.

 

 

 

Short Hand Padding Property

The padding property can have one to four values,

  • padding: 20px;

All four paddings are 20 pixels.

  • padding: 20px 40px;

Top and bottom paddings are 20px.

Left and right paddings are 40px

  • padding: 20px 40px 60px;

Top padding is 20px

Left and right paddings are 40px

Bottom padding is 60px

  • padding: 20px 40px 60px 100px;

Top padding is 20px

Right padding is 40px

Bottom padding is 40px

Left padding is 60px

We may set all these values to px, em, pt, percentages or any other valid unit for length.

An Example program,

<html>
  <head>
   <style type="text/css">
    div.no_padding {
    background-color:teal;
    }
    div.padding
    {
    background-color: slategray;
    padding-top: 25px;
    padding-right: 50px;
    padding-bottom: 25px;
    padding-left: 50px;
    }
    div.short_padding
    {
    background-color:cyan;
     padding: 25px 50px 25px 50px;
    }
   </style>
  </head>
  <body>
   <div class="no_padding">
     <p>This paragraph has no padding</p>
   </div>
   <div class="padding">
     <p>This paragraph has padding</p>
   </div>
   <div class="short_padding">
     <p>This paragraph has padding set with Short hand "padding" property</p>
   </div>
  </body>
</html>

The output of the above program would be,

This is about Margins & Padding in CSS. In the next chapter we will learn more about other CSS properties.

Like us on Facebook

Wideskills