Was Sie über kollabierende Abstände wissen sollten

Okay, ein paar Abstände kommen in eine Bar, stolpern und fallen zu Boden. Der Barkeeper fragt, ob er abserviert werden soll, und der Abstand antwortet: „Nein, ich bin nur ein zusammenfallender Rand.“

Entschuldigung, schlechter Witz.

Im Ernst, kollabierende Abstände sind real und können eine echte Plage sein, wenn Sie nicht wissen, was sie sind und wie sie sich verhalten. Hier sind ein paar Szenarien, in denen diese kleinen Dinger ins Spiel kommen.

Wenn vertikale Welten kollidieren

Kollabierende Abstände treten auf, wenn zwei vertikale Abstände miteinander in Kontakt kommen. Wenn ein Abstand größer ist als der andere, überschreibt dieser Abstand den anderen und hinterlässt einen Abstand.

Nehmen wir an, wir hätten Elemente übereinander gestapelt, eines mit einem unteren Abstand und eines mit einem oberen Abstand

.module {
  display: block;
  width: 100%;
  height: 150px;
}

.module__top {
  margin-bottom: 25px;
  background-color: #f38a6d;
}

.module__bottom {
  margin-top: 50px;
  background-color: #3bbfef;
}

Wenn die obigen Module im HTML-Markup nebeneinander platziert sind, erwarten wir dann nicht richtig, dass vertikal 75px (25px vom oberen Modul plus 50px vom unteren Modul) dazwischen liegen?

Nun, in dieser Ausgabe von CSS Survival of the Fittest erhalten wir nur 50 dieser Pixel. Es ist, als ob der größere Abstand den anderen einfach verschlungen und nichts hinterlassen hätte.

Siehe den Pen Collapsing Margins: Vertical von CSS-Tricks (@css-tricks) auf CodePen.

Messen Sie ruhig nach. Der Abstand zwischen diesen beiden Modulen entspricht den 50px des module__bottom und wirft den Abstand von module__top über Bord.

Eine natürliche Reaktion könnte darin bestehen, den kleineren Abstand immer weiter zu erhöhen, bis er eine Wirkung zeigt. Aber ach, wenn beide Abstände positive Zahlen sind

größerer Abstand = gesamter vertikaler Abstand

Diejenigen unter Ihnen, die mathematisch versierter sind als ich, werden vielleicht clever fragen: Was ist mit negativen Abständen? Die Antwort ist, dass dies einen erheblichen Einfluss hat und den Abstand zwischen den beiden Elementen verringert.

50px + (-25px) = 25px

Auf Deutsch gesagt: Wenn ein Abstand negativ ist, wird der negative Abstand vom positiven Abstand abgezogen, wodurch der gesamte vertikale Abstand reduziert wird. So sieht das aus

Siehe den Pen Collapsing Margins: Vertical and Negative von CSS-Tricks (@css-tricks) auf CodePen.

Und wenn beide Abstände negativ sind? Die gleiche Regel gilt, als ob beide positiv wären. Allerdings kollabiert der größere negative Abstand von beiden, anstatt derjenige, der dem positiven am nächsten ist. Wenn beispielsweise ein Abstand -25px und der andere -50px beträgt, dann ist -50px der Abstand.

Eine weitere Situation, über die Sie sich vielleicht wundern, ist, wenn ein vertikaler Abstand auf einen gleichen vertikalen Abstand trifft. Wenn dies wirklich „Überleben der Stärksten“ wäre, dann sollten zwei kollidierende gleiche Abstände entweder zusammenleben oder zusammen sterben, richtig? Das ist ein guter Gedanke, aber was passiert ist, dass einer weiterhin verwendet wird und einer kollabiert. Es ist so, als ob einer den anderen verschluckt hätte, obwohl wir nicht sicher sind, welcher verschluckt wird.

Wenn Eltern ihre Kinder erden

Kollabierende Abstände treten auch auf, wenn der Abstand eines Kindelements den Abstand seines Elternteils überschreitet. Betrachten wir Folgendes

/* Parent */
div {
  margin: 15px;
}

/* Here come the children */
.red {
  background-color: #ff6b6b;
}

.orange {
  background-color: #ff9e2c;
}

.yellow {
  background-color: #eeee78;
}

.green {
  background-color: #4ecd9d;
}

.blue {
  background-color: #4e97cd;
}

.purple {
  background-color: #6c4ecd;
}

In diesem Beispiel ist div der Elternteil und jede nachfolgende Klasse ist ein verschachteltes Kindelement. Das etabliert die Eltern-Kind-Beziehung.

Auch hier könnte unsere natürliche Neigung darin bestehen, dass der Gesamtabstand die Summe der Eltern- und Kindabstände ist. Das ist jedoch nicht der Fall, und der Kindabstand wird vom Elternabstand überschrieben – zumindest solange das Kindelement unter dem Dach des Elternteils lebt. Eltern können so bestimmend sein.

Aber wie bei jeder elterlichen Bestrafung gibt es einen Weg, dies zu umgehen, indem man etwas Solides zum Elternteil hinzufügt. In diesem Fall ermöglicht das Hinzufügen von 1px Padding die Nutzung beider Abstände.

Siehe den Pen Collapsing Margins: Parents and Children Comparison von CSS-Tricks (@css-tricks) auf CodePen.

Das Gleiche würde gelten, wenn wir dem Elternteil border-top hinzufügen würden. Solange etwas Solides zwischen Elternteil und Kind liegt, werden beide Abstände genutzt.

Fazit

Sehen Sie, wie kollabierende Abstände Dinge knifflig machen können? Ich persönlich stoße bei der Typografie immer wieder frustrierend darauf. Ich bin versucht, Dingen wie <h1> und <h2> Abstände hinzuzufügen, aber das ist oft die Quelle vieler Kopfschmerzen, da vertikale Abstände miteinander kollidieren.

Ich bin daran interessiert zu erfahren, was Sie alle über kollabierende Abstände denken. Insbesondere, wie verwalten Sie sie in einem musterbasierten System? Harry Roberts bietet einige gute Tipps. Bitte teilen Sie!