Margin Collapse in css is a behavior that occurs when two or more margins of adjacent elements are combined into a single margin. The resulting margin is equal to the maximum of the individual margins. This behavior can cause unexpected layout results if not understood and accounted for in the design of a webpage. One common way to prevent margin collapse is to add a border or padding to the elements, which creates a new “block formatting context” and separates the margins.
CSS Margin Collapse
