Frontend & browser·Layout, CSS and the cascade
the child's top margin pushed the parent down instead of moving the child inside it.
Margin collapsing
Also calledcollapsing margins
Adjacent vertical margins between block boxes merging into one, taking the larger of the two rather than adding them. It also happens between a parent and its first or last child when nothing — padding, border, or a new formatting context — separates them, which is the version that produces the confusing bug. It does not happen in flex or grid layouts at all, which is why the problem quietly disappeared for most people.