CSS Margin Collapsing(HTML and CSS tutorial 49) complete course || beginner to Advance

Here are the key points to understand about margin collapsing:
Adjacent Vertical Margins:
Margin collapsing only occurs with vertical margins of adjacent block-level elements. In this context, "adjacent" means that the elements are siblings or the parent and its first/last child.
Margins Collapse to the Larger of the Two:
When two adjacent margins collapse, the larger of the two margins will be used, while the smaller one will be ignored. This applies regardless of whether the margins are positive or negative.
Parent-Child Relationship:
If a parent element has a margin and its first or last child also has a margin, the larger of the two margins will be used and the smaller one will be ignored.
Empty Blocks and Margins:
If a block-level element has no content and only has a margin, the margin will collapse with the margin of its parent or siblings.
Non-Collapsing Margins:
Margins won't collapse if there's a non-empty, non-floating, non-absolute positioned block element between the two elements. This prevents margins from collapsing through an intermediate element.
Padding and Borders Don't Affect Margin Collapsing:
Padding and borders do not contribute to margin collapsing. Only the vertical margins are involved.
Negative Margins: Negative margins can also contribute to margin collapsing. For example, if a block element has a negative top margin, it can overlap with the element above it.
Preventing Margin Collapsing:
There are techniques to prevent margin collapsing, such as using overflow: auto or display: flex. These methods create a new block formatting context, which prevents margins from collapsing.