Collapsible margin, definition explained with some examples

You might have faced Collapsible margins as they are a common yet misleading pattern. We will share some ideas and examples in this article to understand it better.

What is Collapsible margin

Firstly Collapsible margin only apply to block level elements. Secondly it is about top and bottom margins of two block level elements sitting on top of each other.

Collapsible margin happens when the top element have a margin-bottom value and the bottom element have a top-margin value. Definitively the space between them will be the biggest margin between these two values.

Therefore the smaller margin kind of gets eaten by the bigger one. This is the rule for both positive and negative margins.

Simple example of two siblings

Basically here is a simple example:

<h1>This has a margin-bottom</h1>
<p> This has a margin-top</p>

We define the margins in CSS as below:

h1 {
 margin-bottom: 25px;
p {
 margin-top: 50px

The expectation is to have 75px of margin between the two but we will have 50px as the actual distance. Therefore the biggest margin has won. Hooray!

But wait. This is confusing in cases. Yes that is right. Especially in typography. So some articles recommend to have only one direction margin for everything and make the other one zero. Well, good idea and you can override that whenever needed.

Example with a parent and child situation

We might expect the same rule in the case of parent child. But it is different here. The child’s margin will be overriden by parent. So the parent is the dominent in this case.

But if we add some padding or border to the parent, this rule will go away as well.

The top parent has no padding, so it will all collapse and we will only see the purple colour child.

However, the bottom parent has some padding , therefore we can see the margin is applied to the bottom and the top. There is 1px of padding for each child just to see the colours. It does have no effect on the matter though.

Collapsible margins are an interesting and misleading topic and understanding them really helps to design better layouts and write less and more effective codes in general.

Thank you for reading.

© 2019
Azadeh Faramarzi

This site is created and maintined by Azadeh Faramarzi , A passionate developer, sport and code lover who loves to share and write when she has some time.