Học HTML, CSS từ Zero Tới Hero
Margin collapse là một khái niệm trong CSS (Cascading Style Sheets) liên quan đến cách các margin (khoảng cách bên ngoài) của các phần tử được tính toán khi chúng tiếp giáp nhau. Cụ thể, margin collapse xảy ra trong các trường hợp sau:
-
Khi các phần tử liên tiếp có margin trên và dưới gặp nhau: Nếu hai phần tử block (khối) liên tiếp có margin-top và margin-bottom, khoảng cách thực tế giữa chúng không phải là tổng của hai giá trị margin này mà là giá trị lớn hơn trong hai giá trị đó. Ví dụ, nếu phần tử A có
margin-bottom: 20pxvà phần tử B cómargin-top: 30px, khoảng cách giữa chúng sẽ là 30px chứ không phải là 50px. - Khi phần tử con và phần tử cha có margin chạm nhau: Nếu phần tử con có margin-top và không có border, padding hoặc nội dung, và phần tử cha không có border, padding, hoặc content, thì margin-top của phần tử con sẽ bị "sáp nhập" với margin-top của phần tử cha.
- Khi phần tử có margin trên và dưới chạm nhau: Nếu một phần tử có cả margin-top và margin-bottom, và không có border hoặc padding, hai giá trị margin này có thể bị sáp nhập lại với nhau.
Ví dụ
Giả sử bạn có hai phần tử div liên tiếp trong HTML như sau:
<div class="first">First element</div>
<div class="second">Second element</div>
Và CSS như sau:
.first {
margin-bottom: 20px;
}
.second {
margin-top: 30px;
}
Trong trường hợp này, khoảng cách giữa hai phần tử sẽ không phải là 50px (20px + 30px) mà sẽ là 30px, do margin collapse.
Cách tránh margin collapse
Để tránh hiện tượng margin collapse, bạn có thể:
- Thêm padding hoặc border cho phần tử: Ví dụ, thêm
padding: 1pxhoặcborder: 1px solid transparent. - Sử dụng thuộc tính
overflow: Đặt thuộc tínhoverflowcủa phần tử cha làhidden,auto, hoặcscroll. - Thêm content non-breaking: Đôi khi, thêm một phần tử vô hình nhỏ như
cũng có thể giúp ngăn chặn margin collapse.
Hiểu rõ về margin collapse giúp bạn kiểm soát tốt hơn khoảng cách giữa các phần tử trong bố cục trang web và tránh những vấn đề không mong muốn trong việc thiết kế giao diện người dùng.
Nhận xét