2012-03-16 19 views
5

Tại sao lề dọc biến mất khi bố mẹ được đặt thành tràn: hiển thị? Nếu nó được đặt thành tràn: các lề bị ẩn sẽ hiển thị lại. Nó có vẻ phản trực giác.Lề dọc sẽ biến mất khi bố mẹ được đặt thành tràn: hiển thị

Tôi nghĩ rằng tôi hiểu cách tràn được giả định là hoạt động khi nội dung của một phần tử không phù hợp với nó, nhưng tôi không hiểu điều gì đang xảy ra với các lề.

Dưới đây là một ví dụ: (http://jsfiddle.net/VrVc7/)

#outer { 
    background-color:#EEE; 
    overflow:hidden; 
} 

#inner { 
    margin: 30px; 
    padding: 5px; 
    background-color:#ABE; 
} 

<div id="outer"> 
    <div id="inner">abc</div> 
</div> 

Trả lời

4

Đó là vì lợi nhuận sụp đổ:

Nếu bạn có overflow: hidden, bên lề của div bên trong vẫn còn bên trong div bên ngoài.
Nếu bạn có tràn: hiển thị, lề trên và dưới cùng thu thập với các lề bằng không của div ngoài, vì chúng chạm vào nhau. Điều này sau đó được tính toán lại để có giống như lề bên trong.

Vì vậy, tràn: ẩn sẽ phá vỡ các lề thu gọn với các bên trong. Bạn có thể phá vỡ các margin thu hẹp bằng cách cho div bên ngoài một padding hoặc một biên giới. Vì vậy, họ sẽ không chạm vào nhau và vì vậy không bị sụp đổ

http://www.howtocreate.co.uk/tutorials/css/margincollapsing

+0

Đây có phải là tác dụng phụ của tràn: bị ẩn không? Hay nó thực sự ngăn chặn lợi nhuận từ chạm vào, và nếu như vậy làm thế nào? Tôi không chắc chắn cách thể hiện những gì tôi đang cố gắng hỏi. Tôi có nghĩa là không sụp đổ xảy ra như một số quy tắc, có lẽ một trong những dưới đây được liệt kê bởi sandeep, hoặc là lề thực sự không chạm vào và làm thế nào là hoàn thành trong trường hợp đó. – seron

+0

btw, liên kết đó khá hữu ích. – seron

1

Tôi biết rằng đây là những gì nó trông như thế nào. Nhưng những gì thực sự xảy ra ở đây được gọi là thu hẹp margin. Hầu hết thời gian nếu cha mẹ có một lề, hoặc nếu hai anh chị em có một lề sau đó overother eachother. Hãy tưởng tượng bạn có một div với ba đứa con:

|--| 
|[]| 
|[]| 
|[]| 
|--| 

Nếu bạn đặt lề 10 trên trẻ em. Sẽ có tổng cộng 10 khoảng cách dọc giữa mỗi đứa trẻ, mặc dù bạn mong đợi sẽ có 20. Điều này là bởi vì nếu các lề được chia sẻ chúng sẽ sụp đổ vào nhau.

Dù bằng cách nào google nó, điều đó sẽ giải thích tốt hơn tôi có thể.

7

Nó được gọi là collapsing margin. Theo W3c

Trong CSS, lề liền kề của hai hoặc nhiều ô (mà có thể hoặc có thể không phải anh em ruột) có thể kết hợp để tạo thành một biên độ duy nhất. Lề kết hợp theo cách này được gọi là thu gọn và kết quả được kết hợp là được gọi là lề bị thu hẹp.

Cách ngăn chặn từ collapsing margin.

  1. Lề giữa hộp thả nổi và bất kỳ hộp nào khác không bị thu gọn (không phải ngay cả giữa phao và trẻ em trong dòng).
  2. Lề các phần tử thiết lập các bối cảnh định dạng khối mới (chẳng hạn như phao và các phần tử có 'tràn' khác với 'hiển thị') không thu gọn với con đang ở trong dòng.
  3. Lề của các hộp được định vị hoàn toàn không sụp đổ (thậm chí không với trẻ em trong dòng của chúng).
  4. Lợi nhuận của các hộp chặn nội tuyến không bị thu gọn (thậm chí không với số trẻ em trong dòng).
  5. Lề dưới của phần tử cấp khối trong dòng luôn bị thu hẹp với lề trên của người anh em cấp khối trong dòng tiếp theo của nó, trừ khi mà anh chị em có giải phóng mặt bằng.
  6. Lề trên cùng của phần tử khối trong dòng đổ vỡ với lề đầu tiên của trẻ ở cấp khối đầu tiên của nó nếu phần tử không có đường viền trên cùng, không có đệm trên cùng và trẻ không có khoảng hở.
  7. Lề dưới của hộp khối trong luồng có 'chiều cao' là 'tự động' và 'chiều cao tối thiểu' không bị sụp đổ với lề dưới cùng của dòng con cuối cùng của block-level không có đệm đáy và không có đường viền dưới cùng và lề dưới của trẻ không bị thu hẹp với lề trên có độ hở.
  8. Lợi nhuận của một hộp bị sụp đổ nếu thuộc tính 'min-height' bằng 0, và không có đường viền trên cùng hoặc dưới cùng hoặc đệm trên cùng hoặc dưới cùng, và nó có 'chiều cao' là 0 hoặc 'tự động', và nó không chứa một hộp đường và tất cả các lề của trẻ em trong dòng chảy của nó (nếu có) thu gọn.
+0

Tôi thấy rằng danh sách này là từ liên kết bạn đã bao gồm, nhưng có một số thuật ngữ tôi không hiểu. 'Trong dòng' là gì? Tôi cũng bối rối bởi các thuật ngữ khối khác nhau. – seron

+0

+1 cho danh sách dài đẹp – HerrSerker

+0

@seron trong luồng chỉ có nghĩa là không có vị trí hoặc nổi. Họ chỉ là một số anh chị em bình thường bên cạnh nhau – HerrSerker

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