CSS Margin Collapse

Thỉnh thoảng hai margin sẽ được thu gọn lại thành một margin duy nhất.

Thu gọn margin

Margin trên và margin dưới của các phần tử thỉnh thoảng sẽ được thu gọn lại thành một margin duy nhất bằng với margin lớn nhất trong hai margin.

Việc thu gọn margin này không xảy ra đối với margin trái và margin phải! Nó chỉ xảy ra đối với margin trên và margin dưới!

Hãy xem ví dụ sau:

Ví dụ sau sẽ giải thích về việc thu gọn margin:

h1 {
    margin: 0 0 50px 0;
}

h2 {
    margin: 20px 0 0 0;
}

Trong ví dụ trên, phần tử <h1> có margin dưới là 50px và phần tử <h2> có margin trên là 20px.

Theo chiều hướng chung thì mọi người sẽ nghĩ là margin theo chiều dọc giữa phần tử <h1> và phần tử <h2> sẽ có tổng cộng là 70px (50px + 20px). Nhưng do tính năng margin collapse, margin thực tế cuối cùng của nó sẽ chỉ là 50px thôi.