Rand-Block-Start - CSS-Tricks | CSS-Almanach 2025

Die margin-block-startEigenschaft in CSS definiert den Platzbedarf entlang der äußeren Startkante eines Elements in Blockrichtung. Es ist in der Spezifikation der logischen CSS-Eigenschaftenstufe 1 enthalten, die sich derzeit im Arbeitsentwurf befindet.

.element ( margin-block-start: 25%; writing-mode: vertical-lr; )

Die Anfangskante im Block Richtung durch das Element ist bestimmt writing-mode, directionund text-orientation. Bei Verwendung margin-block-startin einem horizontalen Kontext von links nach rechts verhält es sich also so, margin-topals ob die Startkante des Elements die Oberseite ist.

Wenn wir jedoch beispielsweise writing-modevertikal ändern , wird das Element gedreht und die Startkante nach links platziert. Infolgedessen margin-block-startverhält sich wie margin-left. Grundsätzlich ist die Startkante relativ zur Strömungsrichtung. Das ist es, was wir meinen, wenn wir über „logische“ Eigenschaften sprechen.

Syntax

margin-block-start:

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, die margin-topdieser 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

margin-block-start akzeptiert eine einzelne Länge oder einen Schlüsselwortwert.

/* Length values */ margin-block-start: 20px; margin-block-start: 2rem; margin-block-start: 25%; /* Keyword values */ margin-block-start: auto; /* Global values */ margin-block-start: inherit; margin-block-start: initial; margin-block-start: unset;