Margin-block-start - CSS-trucs

De margin-block-starteigenschap in CSS definieert de hoeveelheid ruimte langs de buitenste beginrand van een element in de blokrichting. Het is opgenomen in de CSS Logical Properties Level 1-specificatie, die momenteel in Working Draft staat.

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

De beginrand in de blokrichting wordt bepaald door de elementen writing-mode, directionen text-orientation. Dus bij gebruik margin-block-startin een horizontale links-naar-rechts context, werkt het net zoals margin-topde beginrand van het element de bovenkant ervan is.

Maar als we het veranderen writing-modenaar bijvoorbeeld verticaal, wordt het element geroteerd, waarbij de beginrand naar links wordt geplaatst. Dientengevolge margin-block-startgedraagt zich net als margin-left. Kortom, de startrand is relatief ten opzichte van de richting waarin deze stroomt. Dat is wat we bedoelen als we het hebben over "logische" eigenschappen.

Syntaxis

margin-block-start:

Het is een beetje raar om te zien dat de syntaxis van de ene eigenschap verwijst naar de syntaxis van een andere CSS-eigenschap in de documentatie, maar dat is het echt. Wat het in feite probeert te zeggen, is dat de eigenschap dezelfde waarden accepteert als margin-topdeze syntaxis volgt:

margin-top: | | auto;

Beginwaarde: 0
Van toepassing op: alle elementen behalve interne tabelelementen, ruby-basiscontainers en ruby-annotatiecontainers
Overgenomen: nee
Percentages: zoals voor de bijbehorende fysieke eigenschap
Berekende waarde: hetzelfde als overeenkomstige margin-*eigenschappen
Animatietype: op type berekende waarde

Waarden

margin-block-start accepteert een enkele lengte of trefwoordwaarde.

/* 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;