I'd heard of margin collapse in CSS, but never knew what it was. After taking Josh Comeau's CSS for JavaScript Developers course, I learned it works like social distancing.
If two people want to be 6 feet away from each other, they don't need to be 12 feet apart. Their social distance "bubbles" can overlap.
Vertical (not horizontal, for some reason...) works like that in flow layout. As long as nothing gets between the margins of two elements (such as padding or border), vertical margins will overlap.
Margins define space between elements, but aren't actually part of the size of an element.
If two people want to be 6 feet away from each other, they don't need to be 12 feet apart. Their social distance "bubbles" can overlap.
Vertical (not horizontal, for some reason...) works like that in flow layout. As long as nothing gets between the margins of two elements (such as padding or border), vertical margins will overlap.
Margins define space between elements, but aren't actually part of the size of an element.