Układ CSS łamie bez ramki div

Question

Kilka razy spotkałem się z tym problemem. Nadal nie ma pojęcia, co to powoduje.

reprodukować:

1. Otwarte http://jsbin.com/ibowed/1/edit
2. W panelu CSS znaleźć .l-search-index .top { @ linii 26
3. zmian border: 1px solid #ff0000; do border: 0;
4. whaaat?

Przeglądarka: chrom, ale myślę, że u mogą próbować w jakikolwiek inny ..

Proszę doradzić!

Answer 1

Jest to zupełnie nieintuicyjne przypadek zawalenia marginesie:

§ 8.3.1 z CSS Spec wyjaśnia jak marginesy są przetwarzane iw jakich okolicznościach je zwinąć. Zasady nie są zbyt łatwe do zrozumienia (ma kilka szczególnych przypadków), ale cytuję odpowiednich części specyfikacji dla Ciebie:

W CSS, przylegające brzegi dwóch lub więcej pól (który może lub może nie być rodzeństwem) może łączyć, tworząc pojedynczy margines. Marginesy , które łączą się w ten sposób, mają się zwinąć, a wynikowy łączny margines jest zwany zawiniętym marginesem.

dwa marginesy są przylegające, wtedy i tylko wtedy, gdy: nie pól liniowych, bez odprawy, bez wyściółka i nie granica rozdzielenia im

^{(podkreślone przeze mnie)}

Tak, tak szybko podczas usuwania obramowania pionowe marginesy twoich elementów zwiną się. Twoja sprawa sprawia, że ​​jest nieco skomplikowana, ponieważ masz ujemne marginesy.

Aby to naprawić, można ustawić właściwość overflow lub zastosować element padding:1px na elemencie .top.

Answer 2

Ma to związek z nakładaniem się marginesów i sposobem, w jaki pewne właściwości zmuszają je do ograniczenia. Jeśli umieścisz 2 x elementy div na stronie, obie z marginesami 100 pikseli, odstępy między tymi elementami div będą wynosić 100 pikseli. Nie 200px. To dlatego, że marginesy mogą pokrywać się z innymi marżami. Tak właśnie działają marginesy. To dobra rzecz.

Ale jeśli umieścisz div wewnątrz innego elementu div, oba z marginesami, wówczas te marginesy zachodzą na siebie. Marginesy elementu potomnego nakładają się na marginesy rodzica.

Ale niektóre właściwości - jak odkryłeś, ale także dopełnienie i przepełnienie - zmuszają rodzica do zawężania marginesów swojego dziecka zamiast nakładania się na nie.

Jestem pewien, że ktoś może dać bardziej techniczne wyjaśnienie, ale tak myślę o tym, co się dzieje.

Oto uproszczony przypadek testowy: http://jsbin.com/ukodus/2/
Zdjąć // zanim którykolwiek z linii CSS, aby zobaczyć efekt.

---

„Takie zachowanie nazywa upadek margines. Jedynie górny/dolny margines załamie, a nie w lewo/w prawo.” - @imimmanon

Answer 3

Oto rozwiązanie.

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

Musisz dodać przelew.

Mam nadzieję, że to pomoże.