Randblock - CSS-Tricks | CSS-Almanach 2025

margin-blockist eine Kurzform-Eigenschaft in CSS, die die Elemente margin-block-startund margin-block-endWerte eines Elements festlegt. Beide sind logische Eigenschaften. Es schafft Raum um das Element in der Inline - Richtung, die durch das Element der bestimmt wird writing-mode, directionund text-orientation.

Die Eigenschaft ist Teil der Spezifikation für logische CSS-Eigenschaften und -Werte der Ebene 1, die sich derzeit im Entwurfsstatus des Editors befindet. Das bedeutet, dass sich die Definition und Informationen darüber zwischen jetzt und der offiziellen Empfehlung ändern können.

.element ( margin-block: 30px 60px; writing-mode: vertical-rl; /* Determines the block start direction */ )

Wenn das auf gesetzt writing-modeist, verhält sich horizontal-lrdie margin-blockEigenschaft genauso wie das Setzen von margin-topund margin-bottom. Ein interessanter Aspekt dieser Eigenschaft ist, dass es sich um eine der logischen Eigenschaften handelt, für die keine Eins-zu-Eins-Zuordnung mit einer nicht logischen Eigenschaft vorliegt. Es gibt keine ältere Eigenschaft, die beide (und nur) die Blockrichtungsränder festlegt.

Ändern Sie die Elemente jedoch writing-modein "Ähnliches", vertical-lrund die "untere" Kante wird in vertikaler Richtung gedreht, wobei sie sich eher wie die margin-leftund margin-right-Eigenschaften verhält.

Syntax

margin-block: (1,2)

Es ist etwas seltsam zu sehen, dass die Syntax einer Eigenschaft direkt in der Dokumentation auf die Syntax einer anderen CSS-Eigenschaft verweist, aber genau das ist es. Grundsätzlich wird versucht zu sagen, dass die Eigenschaft dieselben Werte akzeptiert wie margin-top(bis zu zweimal), die dieser Syntax folgen:

margin-top: | | auto;

Ursprünglicher Wert: 0
Gilt für: alle Elemente außer internen Tabellenelementen, Ruby-Basiscontainern und Ruby-Anmerkungscontainern
Geerbt: nein
Prozentsätze: wie für die entsprechende physikalische Eigenschaft
Berechneter Wert: Entspricht den entsprechenden margin-*Eigenschaften
Animationstyp: nach berechnetem Werttyp

Werte

Wenn Sie mit der marginKurzschrift-Eigenschaft vertraut sind , margin-blockwerden Sie sich sehr vertraut fühlen. Der einzige Unterschied besteht darin, dass es in zwei statt in vier Richtungen funktioniert.

/* Length values */ margin-block: 20px 40px; margin-block: 2rem 4rem; margin-block: 25% 15%; margin-block: 20px; /* a single value sets both values */ /* Keyword values */ margin-block: auto; /* Global values */ margin-block: inherit; margin-block: initial; margin-block: unset;