Mô hình hộp CSS2 cho chúng ta biết rằng adjoining vertical margins collapse.Điểm CSS bị thu hẹp là gì?
Tôi thấy nó khá khó chịu, là nguồn gốc của nhiều lỗi thiết kế. Tôi hy vọng rằng bằng cách hiểu mục đích của việc thu hẹp lợi nhuận, tôi sẽ hiểu khi nào nên sử dụng chúng và cách tránh chúng khi chúng không cần thiết.
Mục đích của tính năng này là gì?
Ý nghĩa chung của "lề" không phải là để truyền đạt "di chuyển điều này hơn 10px" mà đúng hơn, "phải có 10px khoảng trống bên cạnh phần tử này".
Tôi luôn thấy điều này dễ nhất để khái niệm hóa với các đoạn văn.
Nếu bạn chỉ đưa ra các đoạn margin-top: 10px và không có lề trên bất kỳ phần tử nào khác, một chuỗi các đoạn văn sẽ được đặt cách nhau một cách đẹp mắt. Nhưng tất nhiên, bạn sẽ gặp rắc rối khi đặt một phần tử khác bên dưới một đoạn văn. Hai người sẽ chạm vào nhau.
Nếu lề không bị thu hẹp, bạn sẽ ngần ngại thêm margin-bottom: 10px vào mã trước đó của mình, vì sau đó bất kỳ đoạn nào sẽ cách nhau 20px, trong khi đoạn sẽ tách biệt với các phần tử khác chỉ 10px.
Vì vậy, thu hẹp lề dọc. Bằng cách thêm các lề trên và dưới của 10px, bạn sẽ nói, "Tôi không quan tâm đến các quy tắc lề nào mà các phần tử khác có. Tôi yêu cầu ít nhất 10px đệm trên và dưới mỗi đoạn văn của tôi."
Tôi chưa bao giờ biết điều này, nhưng tôi rất vui vì tôi đã làm ngay bây giờ! Rất thú vị. –
+1. Cùng một logic áp dụng bên ngoài CSS. Ví dụ trong Microsoft Word, nếu có một lề 12px sau một tiêu đề và 6px trước đoạn văn, nếu đoạn văn sau tiêu đề, sẽ có 12px không gian, không phải là 18px. –
đúng - chúng sụp đổ - KHÔNG BAO GIỜ chúng không phải là cùng cấp độ dom. Ví dụ. thử sụp đổ [this] (http://jsfiddle.net/gDuzC/2/) imho đơn giản: nó thực sự là gây phiền nhiễu – Toskan
tiếp giáp ** dọc ** lề thu gọn – sam