Margin collapsing trong CSS. Tại sao margin: 20px cộng với margin: 30px không bằng 50px?

Margin collapsing là hiện tượng margin dọc (vertical) của hai block-level element liền kề bị gộp lại thành một margin duy nhất, lấy giá trị lớn hơn — nên margin 20px + 30px chỉ còn 30px chứ không phải 50px.

• Margin ngang (horizontal) không bị collapse.
• Để ngăn collapse, có thể tạo BFC bằng overflow: hidden hoặc dùng padding thay thế.
• Ngoài ra flexbox và grid cũng không bị margin collapse, nên khi dùng display: flex hoặc grid thì margin luôn cộng đúng như mong đợi.