1. What is CSS Margin?

CSS margin is helpful when there is a need to create space around an HTML element from all four sides. Basically, the margin property creates a space around an element, outside of any defined boundary of that element. We achieve this functionality by the help of margin property. Check the below example:

Example

This paragraph has a margin of 100px on all sides;
This paragraph has a margin of 50px only on left side.

Try in CodeLab

Tutorial Contents:

  1. Intro To Margins
  2. CSS Margin Sort-Hand Property
  3. How Does Margin Collapse Work?

1.1. CSS Margin for Individual Sides

Previously, in CSS borders tutorial, we assigned and styled each side of an element separately. Luckily, we can do the same with margin property and get full control over the space around the elements. We can do so by following properties:

  1. margin-top
  2. margin-right
  3. margin-botttom
  4. margin-left

Moreover, we can assign the values of CSS borders by following four ways:

  1. auto: The margin is set by browser automatically
  2. length: We assign a value of margin in px, em, cm, etc
  3. %: It specifies a percentage of the width of the containing element
  4. inherit: Margin value is inherited from the parent element

Consider This:

CSS margin can have negative(-ve) values also.

Example

This paragraph element has margin values as margin-left: 50px;, margin-top: 0px;, margin-right:100px; and margin-bottom: 20px;
.para{
	margin-left: 50px; 
	margin-top: 0px; 
	margin-right:100px; 
	margin-bottom: 20px;
}

Try in CodeLab

2. What is CSS Margin Short-Hand Property

Luckily, we can assign all four sides margin values with one property. We can do so by margin property to assign the values of margin-top, margin-right, margin-bottom and margin-left respectively. Actually, this short-hand CSS margin property help us minimize our code length. Check the following examples to understand it completely:

2.1. CSS Margin Property With "4" Values

Example

This paragraph element has margin values as margin-left: 50px;, margin-top: 0px;, margin-right:100px; and margin-bottom: 20px;
.p{
	margin: 0px 100px 20px 50px;
}

Try in CodeLab

2.2. CSS Margin Property With "3" Values

Also, if there are three values assigned to margin short-hand property, values will be assigned as follows: margin:100px 20px 50px;

  1. margin-top: 100px;
  2. margin-right: 20px;
  3. margin-left: 20px;
  4. margin-bottom: 50px;

Example

.p1{
	margin: 100px 20px 50px;
}

Try in CodeLab

2.3. CSS Margin Property With "2" Values

Moreover, if there are two values assigned to margin short-hand property, values will be assigned as follows: margin:20px 50px;

  1. margin-top: 20px;
  2. margin-right: 50px;
  3. margin-left: 50px;
  4. margin-bottom: 20px;

Example

.p1{
	margin: 20px 50px;
}

Try in CodeLab

2.4. CSS Margin Property With "1" Value

Furthermore, if there is only single value assigned to margin short-hand property, values will be assigned as follows: margin: 50px;

  1. margin-top: 50px;
  2. margin-right: 50px;
  3. margin-left: 50px;
  4. margin-bottom: 50px;

Example

.p1{
	margin: 50px;
}

Try in CodeLab

2.5. CSS Margin Property With "auto" Value

If the margin value is set to auto, the element will automatically get centred horizontally. The space will be equilly distributed on both sides of element.

Example

.p1{
	margin: auto;
	width: 300px;
}

Try in CodeLab

2.6. CSS Margin Property With "inherit" Value

If the margin value is set to inherit, the element will inherit the margin value from its parent element.

Example

div{
	margin-left: 100px;
	border: 5px solid #29b6f6;
}
p.p1{
	margin-left: inherit;
}

Try in CodeLab

3. What is CSS Margin Collapse Property?

Sometimes, when there are two HTML elements one after the other, and there is a margin-bottom value for upper element and margin-top value for lower element. In this case, the margin value should be margin-bottom + margin-top, instead the margins are collapsed into each other and the larger value is taken as margin between the two elements. Importantly, the margin collapse property is for top and bottom margins only and not for left and right ones. In the following example, the margin value should be 50px + 70px, but due to collapse property, margin value is rendered as 70px.

Example

h2{
	margin-bottom: 50px;
}
h3{
	margin-top: 70px;
}

Try in CodeLab

Give Us Your Feedback
OR
If You Need Any Help!
Contact Us