CSS-Layout bricht ohne Rand auf div

Question

Ich bin mit diesem Problem mehrmals aufgetreten. Habe immer noch keine Ahnung, was das verursacht.

Nachgestalten:

1. öffnen http://jsbin.com/ibowed/1/edit
2. In CSS-Panel finden .l-search-index .top { @ line 26
3. Änderung border: 1px solid #ff0000;-border: 0;
4. whaaat?

Browser: chrom, aber ich denke, u in jedem anderen versuchen ..

Bitte geben!

Answer 1

Dies ist ein ganz unintuitive Fall einsturz Margen:

§ 8.3.1 der CSS-Spec erklärt, wie die Margen behandelt werden und unter welchen Umständen sie kollabieren. Die Regeln sind nicht so einfach zu verstehen (hat einige spezielle Fälle), aber ich zitiere die relevanten Teile der Spezifikation für Sie:

In CSS, die angrenzenden Ränder von zwei oder mehr Boxen (die Macht oder möglicherweise nicht Geschwister) können kombinieren, um eine einzige Marge zu bilden. Die Margins , die auf diese Weise kombiniert werden, sollen zusammenbrechen, und der resultierende kombinierte Rand wird als minimierter Rand bezeichnet.

Zwei Ränder angrenzen, wenn und nur wenn: keine Zeilen-Boxen, kein Spiel, keine Polsterung und keine Grenze trennen sie

^{(von mir hervorgehoben)}

, also so bald Wenn Sie den Rahmen entfernen, werden die vertikalen Ränder Ihrer Elemente minimiert. Ihr Fall macht es ein bisschen kompliziert, da Sie negative Margen haben.

Um dies zu beheben, können Sie die overflow Eigenschaft festlegen oder padding:1px auf das Element .top anwenden.

Answer 2

Es hat damit zu tun, wie sich die Ränder überlappen und wie bestimmte Eigenschaften sie zwingen, eingeschlossen zu sein. Wenn Sie zwei divs auf einer Seite platzieren, beide mit 100px-Rändern, beträgt der Abstand zwischen diesen divs 100px. Nicht 200px. Das liegt daran, dass die Ränder andere Ränder überlappen dürfen. So funktionieren Margen. Es ist eine gute Sache.

Aber wenn Sie ein Div in ein anderes div, beide mit Rändern, dann überlappen diese Ränder auch. Die Ränder des untergeordneten Elements überschneiden sich mit denen des übergeordneten Elements.

Aber einige Eigenschaften - Grenze, wie Sie entdeckt haben, aber auch Padding und Überlauf - zwingen die Eltern, die Ränder seines Kindes zu enthalten, anstatt sie zu überlappen.

Ich bin sicher, dass jemand eine technischere Erklärung geben kann, aber so denke ich darüber nach, was passiert. Hier

ist ein vereinfachtes Testfall: http://jsbin.com/ukodus/2/
Entfernen Sie die //, bevor eine der Zeilen CSS den Effekt zu sehen.

---

„Dieses Verhalten nennt Marge Zusammenbruch. Nur Ränder oben/unten kollabieren, nicht nach links/rechts.“ - @cimmanon

Answer 3

Hier ist die Lösung.

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

Sie müssen einen Überlauf hinzufügen.

Hoffe, das hilft.