Bạn đã bao giờ gặp phải tình huống bố cục trang web bị "xô lệch" do **margin** hoạt động không như mong đợi? Hiện tượng **margin collapsing** trong CSS có thể gây ra nhiều khó khăn cho các nhà phát triển web. Bài viết này sẽ giúp bạn hiểu rõ về **margin collapsing**, lý do nó xảy ra và cách khắc phục nó một cách hiệu quả. Với kiến thức này, bạn sẽ có thể kiểm soát **khoảng cách giữa các phần tử** trên trang web của mình một cách chính xác, tạo ra bố cục đẹp mắt và chuyên nghiệp.
**Margin collapsing** (sự sụp đổ lề) là một cơ chế trong CSS, trong đó các **margin** liền kề của hai hoặc nhiều phần tử (trong cùng một luồng khối) sẽ "gộp" lại thành một **margin** duy nhất. Điều này có nghĩa là thay vì cộng dồn các **margin**, trình duyệt sẽ chỉ chọn **giá trị margin** lớn nhất để áp dụng.
Hiểu một cách đơn giản, hãy tưởng tượng bạn có hai đoạn văn bản liền kề nhau. Đoạn trên có **margin-bottom** là 20px, và đoạn dưới có **margin-top** là 30px. Thay vì có khoảng cách 50px giữa hai đoạn, **margin collapsing** sẽ chỉ tạo ra khoảng cách 30px (giá trị lớn hơn).
**Margin collapsing** thường xảy ra trong ba trường hợp chính:
Để hiểu rõ hơn, hãy xem xét ví dụ sau:
```htmlBài viết liên quan