Understanding Margin Collapse in CSS
Tags: css, codenewbie, webdev, tutorial
Published: 2021-05-25 09:54:11

Margin and how it collapses was one of the things I had it rough processing and understanding when I first started out writing CSS.

More times than necessary, I got unwanted results because of it, so here I am trying to demystify some of its basic rules so you don't get stuck like I used to - _hopefully I don't bore you out too much_.



![Image showing a box model concepts](https://res.cloudinary.com/moerayo/image/upload/v1621059983/image-of-a-box-model_iepjkm.png)

Margin together with content, padding and border make up the core concepts of the box model. But Margin's ability to produce unexpected and perhaps frustrating results has put it in really bad light over the years - so bad that Max Stoiber once wrote how harmful Margin is in his blog post - [Margin considered harmful]( https://mxstbr.com/thoughts/margin/). _haha_

## So What Really is Margin?
To most developers, margin is that quick and handy CSS property that lets them center a block or inline-block element without much hassle but in the real sense all Margin needs to do is **add space around an element**!

In Margin's quest to add this space, it can accept positive values as well as negative values. While the negative value allows you to pull an element outside of its parent the positive value instead will enable you push an element further down.
This seemingly simple and perhaps _innocent_ feature is responsible for some of the quirks and awesomeness that is associated with Margin.

## Margin Collapse
Notable among some of the unexpected results you con get from using Margin is **Margin collapse**. Understanding when and how Margin collapse happens could save you hours of wasted time and avoidable or minimized headache.
Below are some of the rules that will help you get around understanding Margin Collapse.

### Margin Collapse Rules:

#### RULE 1: Only Vertical Margins collapse.
What this means is that block level elements like `<div>` and `<section>` etc, stacked on top of each other with the same amount of margins between them will have both margins collapse to only have just one margin emerge. 
Here is an example that should give insight to the explanation above:
```css
   div {
       background: rebeccapurple;
       color: #ffffff;
       height: 100px;
       margin-bottom: 30px;
       margin-top: 30px;
       width: 100px;
   }
```
```html
<div>This is a div</div>
<div>This is another div</div>
```
######_Can you guess what the results will be?_

You are probably hoping to get a `60px` margin (`30px` + `30px`) between the bottom and the top of the first and second `div` but interestingly, it doesn't work like that.
As explained before, because these two margins have the same amount of value, all they did was collapse to become `30px`!
![Vertical Margins Collapse Demo](https://res.cloudinary.com/moerayo/image/upload/v1621066272/firefox_BnNVqkJEBf_icac5f.png)


As you can see from the screenshots above, the two margins did collapse.
Below is a link to the codepen live demo, if you'd like to see it in action.
[Codepen Live Example](https://codepen.io/Moe_rayo/pen/WNpwVgx)

What would have happened if these `div` were placed side by side i.e horizontally, with the same amount of margin between the right side of the first `div` and the left side of the second `div`?
```css
   div {
       background: rebeccapurple;
       color: #ffffff;
       display: inline-block;
       height: 100px;
       margin-right: 50px;
       margin-left: 50px;
       width: 100px;
   }
```
```html
<div>This won't collapse</div>
<div>This won't collapse either</div>
```
![Horizontal margin example](https://res.cloudinary.com/moerayo/image/upload/v1621065357/firefox_kaLvRPw1JI_etwsji.png)
![Horizontal margin example](https://res.cloudinary.com/moerayo/image/upload/v1621065348/firefox_xOZcgF7Zdz_ejam33.png)
![Horizontal margin example](https://res.cloudinary.com/moerayo/image/upload/v1621065377/firefox_pkatUdoej4_fjnevm.png)
[HorIzontal Margin Demo](https://codepen.io/Moe_rayo/pen/wvJWwmq)
#####_What happened here?_

The block elements were turned into inline-block elements and they were both given equal amount of margin. As opposed to the collapsing we saw for the vertical block elements,  these `div` did not collapse, instead as seen in the image above, we got two `div` separated by a `100px` margin i.e `50px` from the right side of the first block element and `50px ` from the left side of the second element.
This happened because according to our first rule, only **vertical margins** collapse, horizontal margins do not.

#### RULE 2: The biggest margin wins:
As opposed to our first rule where equal margin collapses to one margin.
Here, when vertical elements are stacked on top of each other with varying margins, the bigger margin will always win.
No matter how minuscule the difference between the two margins is, the smaller margin will will always be enveloped by the larger margin.

```html
<div>The smaller margin gets lost</div>
<div>The bigger margin wins</div>
```
```css
div {
  background: peru;
  color: #ffffff;
  height: 100px;
  margin-bottom: 30px;
  margin-top: 50px;
  width: 100px;
}
```
![The bigger margin wins example](https://res.cloudinary.com/moerayo/image/upload/v1621372066/firefox_yKHPv4eXAp_cnxf84.png)
[Bigger margin wins Demo](https://codepen.io/Moe_rayo/pen/mdWOJbv)
You may have been expecting the margin between the bottom of the first div and the top of the second div to get added up to `80px` but according to the "biggest margin winning" rule, we got a different result where the bigger margin (`50px`) enveloped the (`30px`).
Thus, we only have `50px` of margin between the two `divs`.

#### RULE 3: Only Adjacent elements collapse
According to the Oxford dictionary, adjacent means:

> "next to or adjoining something else". 

This relates to margin collapse in the sense that only elements that are next to one another can collapse.
In effect, line break (`<br>`) or any of the other box-model features i.e padding or border can be seen as _walls_ which will prevent any form of collapse from happening between the elements margins.

Below is an example:
```html
<div>The margin won't collapse</div>
<br>
<div>The margin won't collapse either</div>
```
```css
div {
  background: peru;
  color: #ffffff;
  height: 100px;
  margin-bottom: 30px;
  margin-top: 30px;
  width: 100px;
}
```

Referencing our first rule - Vertical Margin collapse rules - you would expect the margins between the two elements to collapse but this won't happen because of the "wall" i.e line break tag (`<br>`) we have between the two elements.

![Adjacent margin example demo](https://res.cloudinary.com/moerayo/image/upload/v1621370706/firefox_Hr2Lc7EUWA_xyem70.png)
[Adjacent Margin Demo](https://codepen.io/Moe_rayo/pen/mdWOJbv)

If this line break tag (`<br>`) was removed, we would have gotten the same result as we had in the *Vertical Margin Collapse Rule* example.

--------


This is not an exhaustive list of all the rules to know to not encounter the margin collapsing quirks, this is just meant to give you an insight into some of the things you may encounter and  give you a better understanding as to how to tackle others.


Cheers and happy coding.