Wait... Where Did My Margin Go? 🤯 (Margin Collapsing Explained)

Aman Agarwal — Sun, 18 May 2025 16:59:44 +0000

Do you see anything wrong in below image? 👀

No? 🧐
Let me give you hint, Parent margin is missing.

I have made a minor change, do you see what I am talking about now?

This is something that tripped me up recently — turns out it’s caused by a little CSS behavior called margin collapsing.

🤔 So, what is Margin Collapsing?

As per MDN:

The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.

In simpler terms:
If two vertical margins meet (like one element’s bottom and the next one’s top), only the larger one is applied, not both.

This can make it feel like your margins are “disappearing” — which is exactly what I experienced!

🔧 How to Fix It?
One of the simplest ways is to change the display of the parent element to flex or grid.
This stops margin collapsing from happening altogether. As you see in second image.

.parent {
  display: flex; /* or grid */
}

🌱 Why This Mattered to Me
I stumbled upon this while debugging a weird layout issue. Margins weren’t stacking like I expected, and it made me question everything 😅

After some digging, I found this gem of a page:
👉 Mastering Margin Collapsing - MDN

Highly recommended read if you’ve ever felt CSS was gaslighting you.

✅ TL;DR

If vertical margins seem to “disappear”, margin collapsing might be the culprit
Happens between block elements’ top/bottom margins
Avoid it using display: flex, grid, or some padding

Would love to hear if you’ve faced this before — or if this helped you spot a sneaky bug. Let me know below! 👇

Checkout my new project🎀

Aman Agarwal — Tue, 22 Feb 2022 13:50:51 +0000

Presenting liveboard🎃

A live board canvas sharing application made on top of nextJS and socket.io.

Liveboard makes use of socket.io to send the coordinates to draw on the canvas using socket and using HTML canvas to draw the stroke. It also contains tools to change stroke color and stroke width.

I also tried to implement the Figma-like UI to show users in the lobby in the header along with Figma-like pointer sharing.

Ending note, there are still some finishing to be done and there is always scope for improvement. Constructive criticism is welcomed🎏

Tech stack:
Next Js + Socket.io client hosted on vercel
Express + Socket.io hosted on heroku

Code: https://github.com/agarwalamn/liveboard
PS: I won’t mind if you leave a star😁

Peace out☮

DEV Community: Aman Agarwal

Wait... Where Did My Margin Go? 🤯 (Margin Collapsing Explained)

Checkout my new project🎀