Margin-block-end - CSS-tricks

Den margin-block-endegenskab i CSS definerer mængde plads langs den ydre slutning 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-end: 25%; writing-mode: vertical-lr; )

Endelsen kant i blokken retning bestemmes af elementets writing-mode, directionog text-orientation. Så når det bruges margin-block-endi en vandret kontekst fra venstre mod højre, fungerer det ligesom margin-bottomelementets startkant er bunden af det.

Men hvis vi skifter writing-modetil f.eks. Lodret, roteres elementet og placerer endekanten mod højre. Som et resultat margin-block-endopfører vi sig som margin-right. 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-end:

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-end accepterer en enkelt længde eller nøgleordsværdi.

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