Die marginEigenschaft definiert den äußersten Teil des Boxmodells und schafft Platz um ein Element außerhalb definierter Grenzen.
Ränder werden mithilfe von Längen, Prozentsätzen oder dem Schlüsselwort festgelegt autound können negative Werte haben. Hier ist ein Beispiel:
.box ( margin: 0 3em 0 3em; )margin ist eine Kurzform und akzeptiert bis zu vier Werte, die hier gezeigt werden:
.box ( margin: || || || )Wenn weniger als vier Werte festgelegt sind, werden die fehlenden Werte basierend auf den definierten Werten angenommen. Beispielsweise würden die folgenden zwei Regelsätze identische Ergebnisse erzielen:
.box ( margin: 0 1.5em; ) .box ( margin: 0 1.5em 0 1.5em; )Wenn also nur ein Wert definiert ist, werden alle vier Ränder auf denselben Wert gesetzt. Wenn drei Werte deklariert sind, ist dies der Fall margin: (top) (left-and-right) (bottom);.
Jeder der einzelnen Ränder kann mit Langschrift deklariert werden. In diesem Fall würden Sie nur einen Wert pro Eigenschaft definieren:
.box ( margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; )auto und Zentrieren
Jede der Randeigenschaften kann auch einen Wert von annehmen auto. Der Wert von autoweist den Browser grundsätzlich an, den Spielraum für Sie zu definieren. In den meisten Fällen autoentspricht ein Wert von einem Wert von 0(der der Anfangswert für jede Randeigenschaft ist) oder dem auf dieser Seite des Elements verfügbaren Speicherplatz. Ist autojedoch praktisch für die horizontale Zentrierung:
.container ( width: 980px; margin: 0 auto; )In diesem Beispiel werden zwei Dinge getan, um dieses Element horizontal innerhalb des verfügbaren Raums zu zentrieren:
- Das Element erhält eine bestimmte Breite
- Der linke und rechte Rand sind auf eingestellt
auto
Ohne die angegebene Breite hätten die autoWerte im Wesentlichen keine Auswirkung, wenn der linke und der rechte Rand auf 0oder auf den verfügbaren Platz innerhalb des übergeordneten Elements gesetzt würden.
Es sollte auch darauf hingewiesen werden, dass autodies nur für die horizontale Zentrierung nützlich ist. Wenn Sie also autofür den oberen und unteren Rand verwenden, wird ein Element nicht vertikal zentriert , was für Anfänger verwirrend sein kann.
Ränder reduzieren
Vertikale Ränder an verschiedenen Elementen, die sich berühren (daher keine Inhalte, Auffüllungen oder Ränder, die sie trennen), werden reduziert und bilden einen einzelnen Rand, der dem größeren der angrenzenden Ränder entspricht. Dies geschieht nicht an horizontalen Rändern (links und rechts), sondern nur vertikal (oben und unten).
Nehmen Sie zur Veranschaulichung den folgenden HTML-Code:
Collapsing Margins
Example text.Und das folgende CSS:
h2 ( margin: 0 0 20px 0; ) p ( margin: 10px 0 0 0; )In diesem Beispiel h2erhält das Element einen unteren Rand von 20 Pixel. Das Absatzelement, das in der Quelle unmittelbar darauf folgt, hat einen oberen Rand von 10 Pixel.
Der gesunde Menschenverstand scheint darauf hinzudeuten, dass die vertikale Randdicke zwischen dem h2und dem Absatz insgesamt 30 Pixel (20 Pixel + 10 Pixel) beträgt. Aufgrund des Randkollapses beträgt die tatsächliche Dicke jedoch 20 Pixel. Dies wird im folgenden eingebetteten Stift demonstriert:
Obwohl kollabierende Ränder auf den ersten Blick nicht intuitiv erscheinen, sind sie aus einigen Gründen tatsächlich nützlich. Erstens verhindern sie, dass leere Elemente zusätzlichen, normalerweise unerwünschten vertikalen Randraum hinzufügen.
Zweitens ermöglichen sie einen konsistenteren Ansatz für die Deklaration universeller Ränder über Seitenelemente hinweg. Beispielsweise haben Überschriften normalerweise einen vertikalen Randbereich, ebenso wie Absätze. Wenn die Ränder nicht kollabieren, müssen bei Überschriften, die auf Absätze folgen (oder umgekehrt), häufig die Ränder eines der Elemente zurückgesetzt werden, um einen gleichmäßigen vertikalen Abstand zu erzielen.
Drittens gilt der Randkollaps auch für verschachtelte Elemente. Schauen Sie sich den folgenden Stift an:
Hier hat das Absatzelement diveinen oberen Rand von 30 Pixel und ist in einem Element mit einem oberen Rand von 40 Pixel verschachtelt. Darüber hinaus hat das h2Element einen unteren Rand von 20 Pixel.
Wiederum würde der gesunde Menschenverstand vorschlagen, dass der gesamte vertikale Randraum hier 90 Pixel (20 Pixel + 40 Pixel + 30 Pixel) beträgt, aber stattdessen kollabieren alle Ränder zu einem einzigen 40-Pixel-Rand (dem höchsten der drei). Dies ist in den meisten Fällen hilfreich, da keiner der oberen Ränder neu definiert werden muss, um den zusätzlichen vertikalen Raum zu entfernen.
Negative Ränder
Wie Sie vielleicht vermuten, zieht ein negativer Randwert andere Elemente weg, während ein negativer Rand entweder das Element selbst in diese Richtung zieht oder andere Elemente in diese Richtung zieht.
Hier ist ein Beispiel für einen Container mit Polsterung, und der Header h2 hat negative Ränder, die sich durch diese Polsterung zurück zu den Rändern ziehen:
Siehe den
häufigsten Anwendungsfall für negative Ränder von Chris Coyier (@chriscoyier)
auf CodePen.
Hier ist ein Beispiel, bei dem der erste Absatz einen negativen unteren Rand hat, der den nächsten Absatz nach oben zieht.
Siehe den
unteren Absatz von Pen Negative Margin von Chris Coyier (@chriscoyier)
auf CodePen.
Browser-Unterstützung
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Funktioniert | Funktioniert | Funktioniert | Funktioniert | Funktioniert | Funktioniert | Funktioniert |
IE6 ist anfällig für den doppelten Float-Margin-Fehler, der in den meisten Fällen durch Hinzufügen display: inlinezum Floated-Element behoben werden kann .