Margin collapse topic

https://www.codecademy.com/courses/learn-css/lessons/box-model-intro/exercises/margin-collapse

plz explain the margin collapse concept briefly plz…
with example

Hi @ruby7866600282,

  • If we get Two elements, Their margin collapse to one, this is called Margin collapsing .
    The bigger margin wins.
  • This is not a bug, this is on purpose, to ensure that we don’t get too big distance between elements.
  • To work around this, we can use margin-top or margin-bottom.

(Image Credits: maximilian schwarzmüller)

Please go through these articles if you want to dig deeper -

MDN Docs - Margin Collapsing
SitePoint Docs - Margin Collapsing

Hope it helps!

2 Likes