CSS Margin - The Short-Hand Property and Margin Collapse Behavior

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:

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

.para{
	margin-left: 50px; 
	margin-top: 0px; 
	margin-right:100px; 
	margin-bottom: 20px;
}

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

.p{
	margin: 0px 100px 20px 50px;
}

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;

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

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;

.p1{
	margin: 20px 50px;
}

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;

.p1{
	margin: 50px;
}

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.

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

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.

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

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.

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