CSSĐó là margin collapsing giữa cha và con đầu tiên: khi không có gì ngăn cách ở cạnh trên (không border, không padding, không nội dung inline), margin-top của con thoát ra ngoài và hợp nhất với margin-top của cha. Giá trị cuối cùng là số lớn nhất, không phải tổng.
Ba trường hợp collapse: giữa hai anh em kề nhau, giữa cha và con đầu/cuối, và margin trên/dưới của một khối rỗng tự hợp nhất.
Cách chặn:
css
.parent { padding-top: 1px; } /* hoặc border-top */
.parent { display: flow-root; } /* tạo BFC, sạch nhất */
.parent { display: flex; } /* flex/grid không có margin collapse */display: flow-root là lựa chọn hiện đại: tạo block formatting context mà không thêm pixel hay đổi mô hình layout của con.
Lưu ý phạm vi: margin collapse chỉ xảy ra theo chiều dọc, chỉ trong block layout. Bên trong flex/grid container thì không có, đó là lý do gap cho khoảng cách đoán trước được.