2009-09-17 21 views
18

Chỉ cần không thể tìm ra tình huống khi bộ quy tắc thông minh này có thể hữu ích. Chúng phá vỡ sự đơn giản của mô hình hộp và cung cấp nguồn rắc rối vô hạn khi bạn kết hợp các phần bố cục khác nhau với nhau. Vậy lý do là gì?Vì những nguyên tắc nào về lý do thu gọn ký quỹ được giới thiệu trong CSS?

Rules để tham khảo.

Cập nhật: Quy tắc khá hợp lý đối với các phần tử anh chị em, nhưng tại sao lề nên truyền cho các phần tử gốc lên đến cây? Loại vấn đề nào giải quyết được?

Ví dụ:

<div style="margin: 20px; background-color: red;"> 
    <div style="margin: 20px;"> 
     <p style="margin: 100px;">red</p> 
    </div> 
</div> 
<div style="margin: 20px; background-color: blue;">blue</div> 

divs cấp cao nhất được đặt cách nhau từ mỗi khác bởi 100px.

Trả lời

17

Đây là một trong những tình huống mà nó không thực sự có ý nghĩa cho đến khi bạn nhận ra rằng các lựa chọn thay thế ít ý nghĩa hơn.

Như bạn có thể đã biết, lề xác định khoảng cách giữa các phần tử, nó không phải là "đệm ngoài" bao quanh từng phần tử. Nếu hai phần tử có lề 20px nằm cạnh nhau, khoảng cách giữa chúng là 20px, không phải 40px.

Khi lề là khoảng cách đến một phần tử khác, có nghĩa là khoảng cách là từ phần tử đến các phần tử xung quanh, chứ không phải đường biên của phần tử gốc.

Nếu lề sẽ được tính vào ranh giới của phần tử gốc, việc đặt các phần tử trong phần tử div sẽ giới thiệu khoảng cách thừa giữa các phần tử cho dù bản thân số div không có lề hoặc đệm. Các lề xung quanh một phần tử sẽ vẫn giữ nguyên nếu bạn thêm div không bị cản trở xung quanh nó.

+8

Thực ra, tôi sẽ thích thay thế cho độ sắc nét của nó. Mặc dù tôi đồng ý trong một số tình huống thu hẹp lề giúp. –

+4

Điều đó khá hợp lý đối với các yếu tố anh chị em. Nhưng tôi vẫn chưa hiểu tại sao lợi nhuận của các elemnt trẻ em sẽ ảnh hưởng đến lợi nhuận của phần tử cha. – actual

+1

@actual: Khoảng cách giữa phần tử con và ranh giới của phần tử gốc phải giống nhau bất kể các phần tử xung quanh. Các phần tử xung quanh không thể giới thiệu khoảng cách giữa các ranh giới của phần tử cha và phần tử con, vì điều đó có thể thay đổi kích thước của phần tử gốc, do đó lề cũng phải đẩy phần tử cha đi xa, không chỉ phần tử con. – Guffa

3

Khi nào có thể hữu ích?

Ví dụ đơn giản nhất: danh sách các đoạn và tiêu đề, mỗi mục có một số margin-topmargin-bottom. Bạn muốn có một lề trên đầu và cuối của bài viết, và giữa các yếu tố khác nhau.

Khi thu gọn biên độ, bạn có thể thực hiện mà không đặt lề đặc biệt trên mục đầu tiên hoặc cuối cùng (KHÔNG phải là một phần của thông số CSS gốc!) Hoặc đệm vùng chứa.

Nhưng tôi đồng ý, nói chung, đó là một tính năng vô nghĩa.

3

Xem xét nội dung văn bản chứa nhiều đoạn văn. Bạn muốn mỗi đoạn được phân tách bằng 2em và bạn muốn đoạn đầu tiên được tách ra khỏi nội dung trước đó bằng 2em và đoạn cuối cùng được tách ra khỏi nội dung sau bằng 2em.

này có thể dễ dàng thực hiện với CSS sau đây, vì bên lề trên và dưới tách các đoạn văn bản sẽ sụp đổ:

p { 
    margin-top: 2em 
    margin-bottom: 2em; 
} 

Nếu lợi nhuận đã không sụp đổ, điều này sẽ dẫn đến việc lợi nhuận bị ngăn cách bởi một không gian của 4em, không phải 2em. Không có lề thu hẹp, cách duy nhất để đạt được hiệu quả mong muốn là thiết lập một số quy tắc bổ sung cho đoạn đầu tiên và cuối cùng, liên quan đến việc cung cấp cho họ một lớp hoặc id (mà sẽ phải được duy trì nếu văn bản đã bị thay đổi) , hoặc gói chúng trong một yếu tố bổ sung không cần thiết khác và sử dụng: đầu tiên-con và: cuối cùng con, hoặc ... tốt, bạn có được ý tưởng.

tôi có thể đảm bảo rằng, nếu biên độ sụp đổ đã không xảy ra, như vậy sẽ có rất nhiều câu hỏi trùng lặp yêu cầu cách giải quyết để đạt được khoảng cách nhất quán rằng các quy tắc trên đây cung cấp :-)

+1

Trên thực tế, bạn có thể giải quyết điều này bằng cách đơn giản đảm bảo rằng nội dung trước và nội dung sau có lề. Bằng cách đó, bạn tránh cho đoạn đầu tiên hoặc cuối cùng một lớp/id và một lề đặc biệt. – Magne

+0

Dường như tôi không sụp đổ trong kịch bản này sẽ là kỳ vọng ngây thơ. Breaks PoLS cho tôi. Ngoài ra, với các lề bị thu hẹp, bạn không thể 'uncollapse', trong khi thêm một chút đánh dấu để xử lý tình huống của bạn là đủ dễ dàng, ngay cả khi nó có thể lặp đi lặp lại. – nicodemus13

Các vấn đề liên quan