CSS margin

The CSS margin property is used to create blank area or space around specified element. If element has a border, then the margin gets created around the border of specified element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .b{margin: 70px;}
   </style>
</head>
<body>
   
   <p class="a">This paragraph is without margin</p>
   <p class="b">This paragraph is with margin of 70px</p>
   
</body>
</html>

Output

This paragraph is without margin

This paragraph is with margin of 70px

In above example, there is no margin defined to the first paragraph, whereas a margin of 70px is defined to the second paragraph. Let's create another example of margin property:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .a, .b{border: 2px solid purple;}
      .b{margin: 40px;}
   </style>
</head>
<body>
   
   <div class="a">
      <div class="b">
         This is an example of margin property in CSS.
      </div>
   </div>
   
</body>
</html>

Output

This is an example of margin property in CSS.

In above example, a margin of 40px is defined to the DIV element whose class name is b. Therefore, a 40px of space is created around the border of this element.

The figure given below shows, where exactly the margin lies:

CSS margin Syntax

The syntax of margin property in CSS, is:

margin: margin-top margin-right margin-bottom margin-left;

Therefore, the margin property can also be called/used as shorthand for these margin properties:

margin-top - used to create top margin
margin-right - used to create right margin
margin-bottom - used to create bottom margin
margin-left - used to create left margin

Note - All these margin values are defined using length units. Also, either we can use single value or multiple (upto 4) values to define the margin property.

CSS margin with Four Values

First value should apply to top margin
Second value should apply to right margin
Third value should apply to bottom margin
Fourth value should apply to left margin

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{border: 2px solid blue;}
      p{border: 2px solid crimson; margin: 20px 40px 10px 60px;
        padding: 12px;}
   </style>
</head>
<body>
   
   <div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium
         nulla eius rerum, animi, tenetur blanditiis iure inventore quia est
         ipsum minima repellendus dolore beatae illo totam consequuntur ullam
         accusantium laudantium numquam earum voluptates quis?</p>
   </div>
   
</body>
</html>

Output

Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium nulla eius rerum, animi, tenetur blanditiis iure inventore quia est ipsum minima repellendus dolore beatae illo totam consequuntur ullam accusantium laudantium numquam earum voluptates quis?

CSS margin with Three Values

First value should apply to top margin
Second value should apply to right and left margin
Third value should apply to bottom margin

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{border: 2px solid blue;}
      p{border: 2px solid crimson; margin: 20px 60px 10px;
        padding: 12px;}
   </style>
</head>
<body>
   
   <div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium
         nulla eius rerum, animi, tenetur blanditiis iure inventore quia est
         ipsum minima repellendus dolore beatae illo totam consequuntur ullam
         accusantium laudantium numquam earum voluptates quis?</p>
   </div>
   
</body>
</html>

Output

CSS margin with Two Values

First value should apply to top and bottom margin
Second value should apply to right and left margin

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{border: 2px solid blue;}
      p{border: 2px solid crimson; margin: 20px 60px;
        padding: 12px;}
   </style>
</head>
<body>
   
   <div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium
         nulla eius rerum, animi, tenetur blanditiis iure inventore quia est
         ipsum minima repellendus dolore beatae illo totam consequuntur ullam
         accusantium laudantium numquam earum voluptates quis?</p>
   </div>
   
</body>
</html>

Output

CSS margin with One Value

The value should apply to top, right, bottom, and left margin, or in short for all sides. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{border: 2px solid blue;}
      p{border: 2px solid crimson; margin: 60px;
        padding: 12px;}
   </style>
</head>
<body>
   
   <div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium
         nulla eius rerum, animi, tenetur blanditiis iure inventore quia est
         ipsum minima repellendus dolore beatae illo totam consequuntur ullam
         accusantium laudantium numquam earum voluptates quis?</p>
   </div>
   
</body>
</html>

Output

Note - We can also use auto, initial and inherit keyword to define the margin property.

The auto keyword is used when we need to allow browser to create the default size of margin around the border of an element.

The initial keyword is used to use the default value. Whereas the inherit keyword is used when we need to use the value inherited by the parent element.

Note - Negative values are allowed to define margin property in CSS.

Important - If two margins collapse, then the element with higher margin value will be the final margin size between both the element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{border: 2px solid blue;}
      p{border: 2px solid crimson;}
      .a{margin: 30px; padding: 12px;}
      .b{margin: 100px; padding: 12px;}
   </style>
</head>
<body>
   
   <div>
      <p class="a">margin: 30px</p>
      <p class="b">margin: 100px</p>
   </div>
   
</body>
</html>

Output

margin: 30px

margin: 100px

Notice the margin between two paragraphs. That is, there is a margin of 30px defined to the first paragraph. Whereas a margin of 100px is defined to the second paragraph. Therefore, a margin/space of 100px will get created between these two paragraphs.

In above example, there is a margin collapse only between the bottom margin of first paragraph with the top margin of second paragraph. Therefore, the margin collapse rule is applied to this only, rest of all sides of margins for both elements, remains same as defined.

Padding Vs Margin - I've differentiated these two properties of CSS, in its separate tutorial.

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!