Margin-block-start - CSS-tricks

Den margin-block-startegenskab i CSS definerer mængde plads langs den ydre start kant af et element i blokken retning. Det er inkluderet i CSS Logical Properties niveau 1-specifikationen, som i øjeblikket er i Working Draft.

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

Startkanten i blokretningen bestemmes af elementets writing-mode, directionog text-orientation. Så når det bruges margin-block-starti en vandret venstre-til-højre-kontekst, fungerer det ligesom margin-topelementets startkant er toppen af det.

Men hvis vi skifter til writing-modefor eksempel lodret, roteres elementet og placerer startkanten mod venstre. Som et resultat margin-block-startopfører sig sig som margin-left. Dybest set er startkanten i forhold til den retning, den flyder. Det er det, vi mener, når vi taler om "logiske" egenskaber.

Syntaks

margin-block-start:

Det er lidt underligt at se syntaksen for en egenskab henvise til syntaksen for en anden CSS-ejendom i dokumentationen, men det er virkelig, hvad det er. Hvad det grundlæggende forsøger at sige er, at ejendommen accepterer de samme værdier, margin-topsom følger denne syntaks:

margin-top: | | auto;

Startværdi: 0
Gælder for: alle elementer undtagen interne bordelementer, rubinbasisbeholdere og rubinbemærkningsbeholdere
Arvet: nej
Procentdele: som for den tilsvarende fysiske egenskab
Beregnet værdi: samme som tilsvarende margin-*egenskaber
Animationstype: efter beregnet værditype

Værdier

margin-block-start accepterer en enkelt længde eller nøgleordsværdi.

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