Margin collapsing is a CSS behavior where the vertical margins of adjacent block elements merge into a single margin instead of adding together. When 2 elements with top and bottom margins touch, the browser uses the larger of the 2 margin values as the gap between them, not the sum.
A common example: you set a 40px bottom margin on one paragraph and a 40px top margin on the next one. You'd expect 80px of space between them. You get 40px. The margins collapsed to the larger value. The same behavior applies when a parent element and its first or last child element both have vertical margins and there's no border, padding, or other content separating them.
This produces spacing results that look like bugs but are actually specified CSS behavior. Margin collapsing only affects vertical margins between block-level elements. It doesn't apply to flex or grid containers, to elements with overflow set to anything other than visible, or to horizontal margins. When Loupely Lens diagnoses a spacing problem, it accounts for margin collapsing as part of the calculation rather than reporting the margins in isolation.