Margin-block-end - CSS-trükkök

A margin-block-endCSS-ben lévő tulajdonság meghatározza a tér nagyságát az elem külső vége mentén a blokk irányában. Ez benne van a CSS 1. szintű logikai tulajdonságainak specifikációjában, amely jelenleg a Working Draft-ban található.

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

A blokk irányú végét az elem writing-mode, directionés text-orientation. Tehát, ha margin-block-endvízszintes balról jobbra kontextusban használjuk, ugyanúgy jár el, mint margin-bottomamikor az elem kezdő éle annak alja.

De ha az állítást writing-modemondjuk függőlegesre változtatjuk, akkor az elem elfordul, és a végét jobbra helyezi. Ennek eredményeként margin-block-endugyanúgy viselkedik margin-right. Alapvetően a kezdőél az áramlás irányához viszonyítva van. Erre gondolunk, amikor a „logikai” tulajdonságokról beszélünk.

Szintaxis

margin-block-end:

Nagyon furcsa látni, hogy az egyik tulajdonság szintaxisa egy másik CSS tulajdonság szintaxisára hivatkozik a dokumentációban, de valójában ez az. Alapvetően azt akarja mondani, hogy a tulajdonság ugyanazokat az értékeket fogadja el, margin-topamelyek ezt a szintaxist követik:

margin-top: | | auto;

Kezdő érték: 0
Alkalmazható: minden elem, kivéve a belső táblázat elemek, rubin bázis konténerek, és Ruby annotáció konténerek
Örökölt: nem
Százalékok: ami a megfelelő fizikai tulajdonságot illeti
Számított érték: megegyezik a megfelelő margin-*tulajdonságokkal
Animáció típusa: kiszámított értéktípus szerint

Értékek

margin-block-end egyetlen hosszúságot vagy kulcsszó értéket fogad el.

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