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

A margin-block-startCSS tulajdonság meghatározza a tér nagyságát az elem külső kezdő éle 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-start: 25%; writing-mode: vertical-lr; )

A blokk irányú kezdőélet az elem határozza meg writing-mode, directionés text-orientation. Tehát margin-block-startvízszintes balról jobbra kontextusban történő használat esetén ugyanúgy működik, mint margin-topamikor az elem kezdő éle annak teteje.

De ha az állítást writing-modemondjuk függőlegesre változtatjuk, akkor az elem elfordul, és a kezdőél balra helyezkedik el. Ennek eredményeként margin-block-startugyanúgy viselkedik, mint margin-left. 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-start:

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-start egyetlen hosszúságot vagy kulcsszó értéket fogad el.

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