Các ngắt bố cục CSS không có đường viền trên div

Question

Tôi đã gặp phải vấn đề này nhiều lần. Vẫn không có đầu mối gì gây ra điều này.

tái sản xuất:

1. mở http://jsbin.com/ibowed/1/edit
2. Trong bảng điều khiển CSS tìm .l-search-index .top { @ dòng 26
3. thay đổi border: 1px solid #ff0000;-border: 0;
4. whaaat?

Trình duyệt: chrome, nhưng tôi nghĩ rằng u có thể thử trong bất kỳ khác ..

Xin cho biết!

Answer 1

Đây là một trường hợp khá unintuitive của lề sụp đổ:

§ 8.3.1 của CSS Spec giải thích cách lề được xử lý và theo đó những hoàn cảnh họ sụp đổ. Các quy định là không quá dễ hiểu (có một số trường hợp đặc biệt), nhưng tôi trích dẫn những phần liên quan của spec cho bạn:

Trong CSS, lề liền kề của hai hoặc nhiều ô (mà có thể hoặc có thể không phải là anh chị em) có thể kết hợp để tạo thành một lề. 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.

Hai lề được liền kề khi và chỉ khi: không có hộp dòng, không giải phóng mặt bằng, không có đệm và không biên giới tách chúng

^{(nhấn mạnh của tôi)}

Vì vậy, trong thời gian sớm khi bạn xóa đường viền, các đường viền dọc của các phần tử của bạn sẽ sụp đổ. Trường hợp của bạn làm cho nó một chút phức tạp vì bạn có lợi nhuận tiêu cực.

Để khắc phục điều này, bạn có thể đặt thuộc tính overflow hoặc áp dụng padding:1px trên phần tử .top.

Answer 2

Điều này liên quan đến cách lề chồng lên nhau và cách một số thuộc tính buộc chúng phải được chứa. Nếu bạn đặt 2x div trên một trang, cả hai đều có lề 100px, khoảng cách giữa các div đó sẽ là 100px. Không phải 200px. Đó là vì lợi nhuận được phép chồng lên các lề khác. Đó chỉ là cách lề hoạt động. Đó là một điều tốt.

Nhưng nếu bạn đặt một div bên trong div khác, cả hai đều có lề, thì các lề đó cũng trùng nhau. Lề của phần tử con chồng lên nhau của cha mẹ.

Nhưng, một số thuộc tính - biên giới, như bạn đã phát hiện, nhưng cũng đệm và tràn - buộc phụ huynh phải chứa lề của con thay vì chồng chéo chúng.

Tôi chắc rằng ai đó có thể đưa ra giải thích kỹ thuật hơn, nhưng đó là cách tôi nghĩ về những gì đang xảy ra.

Đây là trường hợp thử nghiệm được đơn giản hóa: http://jsbin.com/ukodus/2/
Xóa // trước bất kỳ dòng CSS nào để xem hiệu ứng.

---

"Hành vi này được gọi là sự sụp đổ lề. Chỉ trên/lề dưới sẽ sụp đổ, không phải sang trái/phải." - @cimmanon

Answer 3

Đây là giải pháp.

.l-search-index .top{border: 0; height: 70%; overflow: auto;} 

Bạn phải thêm tràn.

Hy vọng điều này sẽ hữu ích.