Thu gọn CSS Thu gọn

Question

Vì vậy, sự sụp đổ lề cơ bản xảy ra khi bạn không đặt bất kỳ lề hoặc đệm hoặc đường viền nào thành phần tử div đã cho?

Answer 1

số Khi bạn có hai lề dọc liền kề, càng lớn của hai được sử dụng và người kia bị bỏ qua. Ví dụ, nếu bạn có hai phần tử hiển thị khối, A, tiếp theo là B bên dưới nó, và A có lề dưới của 3em, trong khi B có lề trên của 2em, thì khoảng cách giữa chúng sẽ là 3em.

Nếu bạn đặt đường viền hoặc đệm, điều này sẽ ngăn không cho sự sụp đổ xảy ra. Trong ví dụ trên, khoảng cách giữa hai phần tử sẽ là 5em.

Nếu bạn không đặt bất kỳ lề nào, thì sẽ không có bất kỳ lề nào bị thu gọn. Nó không có gì để làm với loại phần tử được sử dụng - nó có thể áp dụng cho tất cả các loại phần tử, không chỉ các phần tử <div>.

Đọc the CSS 2.1 specification để biết thêm chi tiết.

Answer 2

"biểu thức lề thu hẹp có nghĩa là lề liền kề (không có nội dung, vùng đệm hoặc khu vực biên giới không trống) của hai hoặc nhiều ô (có thể cạnh nhau hoặc lồng nhau) kết hợp để tạo thành một lề duy nhất. "

Nguồn: Box Model - 8.3.1 Collapsing margins