How to set margins and paddings in CSS

How can you tell the difference between margin and padding and when one should use them.

Solution

The property margin adds space to the outside of an element. This margin can be set independently from one another.

margin-top: 10px;
margin-right: 20px;
margin-bottom: 25px;
margin-left: 15px;

The same thing can be written in a shorter form:

margin: 10px 20px 25px 15px;

If the margins have equal values, use the following rule:

margin: 5px;

As a result of using this rule, margin of the element from all sides is equal to 5px.

Figure 1 shows what happens to a block-level element if margins are added to it.

So the code goes like this.

HTML code:

<p>
  This paragraph by default uses margins of the browser styles. 
  The background and the color is set in page styles for better clarity as to where the margins are.
</p>
<p>
  This paragraph also uses the same margins as set in browser styles. 
  This paragraph was added for you to see the distance between blocks.
</p>
<p class="margin-example">
  This paragraph uses margin with value 35px. 
  This margin creates additional space outside the borders of the block.
</p>

CSS code:

p {
  background-color: #CCCCCC;
  border: 1px solid #0182C4;
}

p.margin-example {
  margin: 35px;
}

Result:

Figure 1. Adding margins to the element using CSS

Property padding adds additional space inside an element - inside border but outside of content. It's possible to set padding values to every side individually.

padding-top: 10px;
padding-right: 20px;
padding-bottom: 25px;
padding-left: 15px;

The same thing can be written in a shorter form:

padding: 10px 20px 25px 15px;

The same as with margins, if the padding values are the same around the element, you can write it as follows:

padding: 5px;

Figure 2 shows an example of a block code with paddings applied. Below you can see the actual code. Compare figures 1 and figures 2 to understand the difference between paddings and margins.

HTML code:

<p>
  This paragraph by default uses margins of the browser styles. 
  The background and the color is set in page styles for better clarity as to where the margins are.
</p>
<p>
  This paragraph also uses the same margins as set in browser styles. 
  This paragraph was added for you to see the default distance between blocks.
</p>
<p class="padding-example">
  This paragraph uses padding with value 35px.
  This padding creates additional space inside the block.
</p>

CSS code:

p {
  background-color: #CCCCCC;
  border: 1px solid #0182C4;
}

p.padding-example {
  padding: 35px;
}

Result:

Figure 2. Adding paddings to the element using CSS

Discussion

The solutions above show differences between padding and margin properties. The first one - margin, creates additional space between an element and anything that surrounds it and the second one - inside of the element, between its border and content. Figure 3 serves as a perfect illustration of the above.

Figure 3. Using margins, paddings, border and element frame parameters

If you simultaneously add margins and paddings to an element with fixed width, its dimensions will increase respectively. For example, if an element has 300 pixels, and we add 35 pixels as padding to all sides, in this case its width will be equal to 370 pixels (initial 300 plus 35 from each side). If you add 35 pixels as margin you'll get width of 440 pixels (but the visible width will be 370 pixels, 35 pixels is the spacing from all sides).

If the layout of your document is based on the precise calculations, don't forget to count the values of each element carefully, including any margins and paddings.

Quirks

Confusion when it comes to compatibility mode: very old versions of Internet Explorer, for example 5 and 5.5, the size of borders and padding is included in the specified width of the element, in these browsers, the width of the elements described above would keep the value of 300 pixels, but because of the included paddings and added margins the size of the visible part of the element would be reduced. To avoid this, you can add padding to the parent element, instead of adding a margin to this element. Currently, most of the designers don't bother to ensure the correct display of page in Internet Explorer 5, so the only thing you should be concerned about is - how to avoid the transition to Internet Explorer 6 when in compatibility mode (aka. Quirks Mode).