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

A margin-inline-startCSS tulajdonság meghatározza a tér nagyságát egy elem külső kezdő éle mentén inline irányban. Ez benne van a CSS 1. szintű logikai tulajdonságainak specifikációjában, amely jelenleg a Working Draft-ban található.

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

Az inline irányú kezdőélet az elem határozza meg writing-mode, directionés text-orientation. Tehát, ha margin-inline-startvízszintes balról jobbra kontextusban használjuk, ugyanúgy működik, mint margin-leftaz elem kezdő éle a bal oldal.

De ha az állítást writing-modemondjuk függőlegesre változtatjuk, akkor az elemet az óramutató járásával megegyező irányba forgatjuk, és a kezdő élt a teteje felé helyezzük. Ennek eredményeként margin-inline-startugyanúgy viselkedik, mint margin-top. 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-inline-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-inline-start: 20px; margin-inline-start: 2rem; margin-inline-start: 25%; /* Keyword values */ margin-inline-start: auto; /* Global values */ margin-inline-start: inherit; margin-inline-start: initial; margin-inline-start: unset;