Alles, was Sie über CSS Margin wissen müssen

Eines der ersten Dinge, die viele von uns beim Erlernen von CSS gelernt haben, waren die Merkmale der verschiedenen Elemente eines Blocks in CSS, die als „CSS-Blockmodell“ bezeichnet werden. Eines der Elemente im Blockmodell ist der Rand (äußerer Rand), ein transparenter Bereich um den Block, der andere Elemente vom Inhalt dieses Blocks abstößt. Die Eigenschaften für margin-top , margin-right , margin-bottom und margin-left wurden bereits in CSS1 beschrieben, zusammen mit der abgekürzten Randeigenschaft für die gleichzeitige Einstellung in allen vier Eigenschaften.

Der Rand scheint jedoch ziemlich einfach zu sein. In diesem Artikel werden wir jedoch einige Punkte betrachten, auf die die Leute bei der Verwendung stoßen. Insbesondere, wie Ränder miteinander interagieren und wie das Zusammenfallen der äußeren Ränder tatsächlich funktioniert.

---

CSS-Blockmodell

Wie bei allen Artikeln über die Komponenten des CSS-CSS-Blockmodells müssen wir bestimmen, was wir damit meinen und wie das Modell in verschiedene Versionen von CSS klassifiziert wurde. Das Blockmodell bezieht sich darauf, wie die verschiedenen Komponenten des Blocks - Inhalt (Pad), Auffüllen (Auffüllen), Rand (Rahmen) und Rand (Auffüllen) - lokalisiert sind und miteinander interagieren. In CSS1 wurde das Blockmodell anhand des in der folgenden Abbildung gezeigten ASCII-Diagramms dargestellt.

Alle vier Eigenschaften für jede Seite des Blocks und die abgekürzte Randeigenschaft wurden in CSS1 definiert.

Die CSS2.1-Spezifikation enthält eine Illustration zur Veranschaulichung des Blockmodells und definiert auch Begriffe, die wir weiterhin zur Beschreibung verschiedener Blöcke verwenden. Die Spezifikation beschreibt Inhaltsfeld, Auffüllfeld, Rahmenfeld und Randfeld, die jeweils durch die Grenzen von Inhalt, Auffüllen, Rand bzw. Rand definiert sind.



Derzeit gibt es eine Spezifikation für die Block Model 3- Version als Arbeitsentwurf. Wenn Sie das Blockmodell und die Ränder definieren , kehren wir zu CSS2 zurück, sodass wir im gesamten Artikel die Definition von CSS2 verwenden.

Rand reduzieren

Die CSS1-Spezifikation definierte nicht nur die Ränder, sondern auch deren Zusammenbruch. Dieses Verhalten hat zu vielen Enttäuschungen geführt. Das Reduzieren des Randes ist sinnvoll, wenn man bedenkt, dass CSS damals als Auszeichnungssprache für Textdokumente verwendet wurde. Reduzierter Rand bedeutet, dass, wenn auf eine Überschrift mit einem niedrigeren Rand ein Absatz mit einem oberen Rand folgt, diese beiden Einrückungen nicht addiert werden, wodurch eine große Lücke zwischen den Elementen entsteht.

Wenn zwei Ränder zusammenfallen, wird der Abstand zwischen den Elementen gleich dem größeren der beiden Einzüge. Die kleinere Einkerbung endet tatsächlich innerhalb der größeren

Randkollaps in folgenden Situationen:

• Benachbarte Geschwister (Alleinerziehende)
• Leere Blöcke
• Elternteil und erstes / letztes Kind

Benachbarte Pflegeelemente

Ich werde die Beschreibung mit einer Demonstration beginnen, wie die Ränder zwischen benachbarten Geschwistern zusammenbrechen. Wenn im normalen Stream zwei Elemente nacheinander angezeigt werden, wird der untere Rand des ersten Elements mit dem oberen Rand des nachfolgenden Elements reduziert, sofern nachstehend nichts anderes angegeben ist.

Im folgenden CodePen-Beispiel gibt es drei div Elemente. Für das erste Element betragen der obere und untere Rand 50px, für das zweite - 20px, für das dritte - 3em. Der Rand zwischen den ersten beiden Elementen beträgt 50px, da der untere Rand des unteren Elements vom oberen Rand des oberen Elements absorbiert wird. Der Abstand zwischen den beiden zweiten Elementen beträgt 3em, da 3em am unteren Rand des zweiten Elements größer als 20 Pixel ist.

Leere Blöcke

Wenn der Block leer ist, können sein oberer und unterer Rand miteinander kollabieren. Im folgenden CodePen-Beispiel hat das zweite Element mit der empty Klasse (nicht sichtbar, da es leer ist) einen oberen und unteren Rand von 50 Pixel. Der Abstand zwischen dem ersten und dritten Element beträgt jedoch nicht 100 Pixel, sondern 50. Dies ist ein Ergebnis des Zusammenbruchs zweier Ränder.

Wenn Sie dem Block etwas hinzufügen (sogar Polsterung), werden der obere und der untere Rand verwendet und nicht reduziert.

Elternteil und erstes / letztes Kind

Dieses Szenario des Randkollapses verwirrt Menschen häufiger als andere, da es nicht intuitiv ist. Im nächsten CodePen haben wir ein div mit dem Klassen- wrapper (Wrapper), und ich habe dieses div outline Rot gesetzt, damit seine Ränder sichtbar sind. Alle drei Kinder haben einen Rand von 50 Pixel. Das erste und das letzte Element befinden sich jedoch neben den Rändern des Wrapper-Elements. Es gibt keine Einrückung von 50 Pixeln zwischen dem Element und dem Wrapper.


Dies liegt daran, dass der Rand des Kindes mit jedem Rand des Elternteils so zusammenfällt, dass er außerhalb des Elternteils endet. Sie können dies sehen, wenn Sie das Kind über das Entwickler-Browserfenster testen. Der gelb hervorgehobene Bereich ist der Rand.

Nur Rand reduzieren

Das letzte Beispiel zeigt auch etwas über das Reduzieren des Randes. In CSS2 wurden nur die vertikalen (oberen und unteren) Ränder zum Kollabieren entworfen. Daher kollabieren im obigen Beispiel die Ränder links und rechts nicht und enden im Wrapper.

Hinweis: Beachten Sie, dass der Rand nur in Richtung des Blocks kollabiert, z. B. zwischen Absätzen.

Kollapsverhütung

Der Rand wird nicht reduziert, wenn das Element auf absolute Positionierung oder die Eigenschaft float . Wie kann dies jedoch verhindert werden, wenn Sie sich in einer Situation befinden, in der die Marge zusammenbricht?

Ein reduzierter Rand tritt nicht in einer Situation auf, in der sich etwas dazwischen befindet.

Beispielsweise werden der obere und der untere Rand eines leeren Blocks nicht reduziert, wenn der Block auf einen Rand oder eine Auffüllung eingestellt ist. Im folgenden Beispiel habe ich einen 1px-Auffüllblock hinzugefügt. Jetzt gibt es oben und unten im Block einen Rand von 50px.


Dies ist die Logik: Wenn ein leerer Block keinen Rand oder Abstand hat, wird er praktisch unsichtbar. Beispielsweise könnte es sich um einen leeren Absatz handeln, der im Markup Ihres CMS platziert wird. Wenn Ihr CMS redundante Absatzelemente hinzufügt, möchten Sie wahrscheinlich nicht, dass sie große Einrückungen zwischen anderen Absätzen verursachen, da deren Ränder berücksichtigt werden. Fügen Sie dem Block etwas hinzu und erhalten Sie diese Einrückungen.

Ein ähnliches Verhalten ist am Rand des ersten oder letzten Kindes zu beobachten, dessen Rand über den Elternteil hinausgeht. Wenn wir dem Elternteil einen Rahmen hinzufügen, bleibt der Rand des Kindes im Inneren.


Und wieder ist dieses Verhalten logisch. Wenn Sie Wrapper-Elemente für semantische Zwecke haben, die nicht visuell angezeigt werden, möchten Sie wahrscheinlich nicht, dass sie bei der Anzeige große Einrückungen erzeugen. Dies war nützlicher, wenn das Web hauptsächlich aus Text bestand. Und dieses Verhalten ist weniger nützlich, wenn wir Layoutelemente verwenden.

Erstellen eines "Blockformatierungskontexts"

Der neue „Block Formatierungskontext“ (BFC) verhindert, dass Ränder aus dem übergeordneten Element herausfallen. Wenn wir uns das Beispiel mit dem ersten und dem letzten untergeordneten Element noch einmal ansehen, dessen Ränder außerhalb der Grenzen des Wrapper-Elements liegen, und den Wrapper so einstellen, dass Folgendes display: flow-root , wodurch BFC erstellt wird, bleibt der Rand der untergeordneten Elemente innerhalb.


Weitere Informationen zur display: flow-root finden Sie in meinem Artikel " Grundlegendes zum CSS-Layout und zum Kontext der Blockformatierung ". Das Ändern des Werts der overflow in " auto " hat den gleichen Effekt, da auch ein neuer BFC erstellt wird, obwohl dies zu Bildlaufleisten führen kann, die in bestimmten Fällen nicht benötigt werden

Flex- und Grid-Container

Flex- und Grid-Container legen den Flex- und Grid-Formatierungskontext für untergeordnete Elemente fest, sodass sie ein unterschiedliches Blocklayoutverhalten aufweisen. Einer dieser Unterschiede ist, dass die Ränder nicht zusammenbrechen:

Ein Flex-Container legt einen neuen Flex-Formatierungskontext für Inhalte fest. Dies entspricht dem Festlegen eines Blockformatierungskontexts, außer dass das Flex-Markup anstelle des Block-Markups verwendet wird. Floats funktionieren beispielsweise nicht in einem Flex-Container, und der Rand eines Flex-Containers fällt nicht mit dem Rand der untergeordneten Elemente zusammen.
- Flexbox Level 1

Wenn wir das obige Beispiel nehmen und es mit einem Flex-Container umwickeln, der die Richtung der Hauptachse der Spalte Flex-Richtung: angibt, wird klar, dass der Rand der Kinder jetzt nicht über den Umbruch hinausgeht. Außerdem werden die Ränder zwischen benachbarten Flex-Elementen nicht reduziert, sodass zwischen den Flex-Elementen ein Abstand von 100 Pixel entsteht. Dies ist die Summe der oberen und unteren Ränder, die jeweils 50 Pixel groß sind.

Margin-Strategien für Ihre Website

Aufgrund des Zusammenbruchs besteht eine gute Lösung darin, eine konsistente Methode zum Arbeiten mit Margen auf Ihrer Website anzubieten. Am einfachsten ist es, wenn Sie festlegen, dass der Rand nur oben oder unten auf den Elementen festgelegt wird. In diesem Fall sollten Sie nicht zu oft auf Kollapsprobleme stoßen, da die Seite, auf der der Rand festgelegt ist, immer an die Seite des anderen Elements ohne Rand angrenzt.

Hinweis : Harry Roberts hat eine ausgezeichnete Veröffentlichung, in der die Gründe aufgeführt sind, warum es eine gute Idee ist, den Rand nur in eine Richtung zu setzen, und nicht nur, um Kollapsprobleme zu lösen.

Dieser Ansatz löst nicht das Problem, dass der Rand aus untergeordneten Elementen über die Grenzen des Elternteils hinaus fällt, auf die Sie möglicherweise stoßen. Dieses spezielle Problem tritt normalerweise seltener auf. Wenn Sie verstehen, warum dies geschieht, können Sie eine Lösung finden. Die ideale Lösung besteht darin, die Komponenten festzulegen, für deren display: flow-root Folgendes erforderlich ist display: flow-root . Mit einem Fallback (Fallback) für ältere Browser können Sie einen overflow , um einen BFC (Blockformatierungskontext) zu erstellen. Verwandeln Sie die Eltern in einen Flex-Container. oder stellen Sie die Polsterung sogar auf 1px ein. Beachten Sie, dass Sie mithilfe der Browserunterstützungsanforderung für Eigenschaften feststellen können, ob die Eigenschaft display: flow-root unterstützt wird, sodass nur ältere Browser eine weniger optimale Lösung erhalten.

Ich glaube, dass in den meisten Fällen das Verständnis, warum Margen zusammenbrechen (oder nicht), der Schlüssel ist. Auf diese Weise können Sie bestimmen, wie Sie jeweils damit umgehen sollen. Unabhängig von der gewählten Methode teilen Sie diese Informationen Ihrem Team mit. Sehr oft ist der Zusammenbruch des Randes ein wenig mysteriös, so dass die Art und Weise, wie man damit umgeht, nicht immer offensichtlich ist. Ein Kommentar in Ihrem Code kann angemessen sein. Sie können sogar einen Link zu diesem Artikel einfügen und dabei helfen, Wissen über das Reduzieren von Rändern auszutauschen.

Ich habe beschlossen, diesen Artikel mit einigen zusätzlichen Daten zum Rand zu ergänzen.

Zinsmarge

Wenn Sie Prozentsätze in CSS verwenden, sollten es Prozentsätze von etwas sein. Als Prozentsatz festgelegte Ränder (sowie Auffüllungen) werden immer relativ zur Breite des übergeordneten Elements berechnet. Dies bedeutet, dass Sie bei Verwendung von Prozentsätzen von allen Seiten des Elements immer den gleichen Spielraum haben.

Im folgenden CodePen-Beispiel habe ich einen Wrapper mit einer Breite von 200 Pixel, in dem sich ein Block mit einem Rand von 10% befindet. Von allen Seiten beträgt der Rand 20px, was 10% von 200px entspricht.

Margin in einer flussabhängigen Welt

In diesem Artikel haben wir über vertikale Ränder gesprochen. Modernes CSS denkt jedoch in der Regel mehr über die Position von Elementen relativ zum Stream als relativ zu den physischen Seiten nach. Wenn wir also über vertikale Ränder sprechen, sprechen wir tatsächlich über Ränder in der Blockdimension. Diese Ränder können im horizontalen Schreibmodus oben oder unten oder im vertikalen Modus rechts oder links sein.

Nachdem Sie mit logischen Richtungen in Bezug auf den Fluss gearbeitet haben, wird es einfacher, über den Anfang und das Ende des Blocks zu sprechen als über den oberen und unteren Rand. Um dies zu vereinfachen, wurde in CSS eine Spezifikation der booleschen Eigenschaften und Werte eingeführt. Es ersetzt physikalische Eigenschaften durch flussbezogene Eigenschaften.

Wenn wir über den Rand sprechen, erhalten wir die folgenden Alternativen (wenn wir mit Englisch oder einem anderen horizontal aufgezeichneten Modus mit der Richtung des Textes von links nach rechts arbeiten).

• margin-top = margin-block-start
• Rand-rechts = Rand-Inline-Ende
• Rand-unten = Rand-Block-Ende
• margin-left = margin-inline-start

Wir haben auch zwei neue abgekürzte Eigenschaften:

• Randblock
• Margin-Inline

Im folgenden CodePen-Beispiel habe ich Stream-bezogene Schlüsselwörter verwendet und dann den Blockschreibmodus geändert. Sie können sehen, wie Ränder dem Textstrom folgen, anstatt an die physischen Seiten gebunden zu sein.


Weitere Informationen zu logischen Eigenschaften und Werten finden Sie in MDN oder in meinem Artikel Grundlegendes zu logischen Eigenschaften und Werten im Smashing Magazine.

Abschließend

Jetzt wissen Sie das meiste, was Sie über die Marge wissen sollten. Kurz:

• Der Rand kann zusammenbrechen. Wenn Sie wissen, wann dies geschieht und wann nicht, können Sie eventuelle Probleme lösen.
• Das Installieren des Randes in nur einer Richtung löst viele damit verbundene Probleme.
• Teilen Sie wie in jeder CSS-Situation die Entscheidungen, die Sie treffen, mit Ihrem Team und kommentieren Sie Ihren Code
• Die Berücksichtigung von Block- und Linienmessungen anstelle der physischen Seiten oben, rechts, unten und links hilft Ihnen dabei, da das Web immer unabhängiger vom Schreibmodus wird