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

A margin-inline-endCSS tulajdonság meghatározza az elem külső vége mentén a tér nagyságát 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-end: 25%; writing-mode: vertical-lr; )

Az inline irányban végződő élt az elem writing-mode, directionés text-orientation. Tehát, ha margin-inline-endvízszintes balról jobbra kontextusban használjuk, ugyanúgy működik, mint margin-rightaz elem vége a jobb oldalon.

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 végét az alja felé helyezzük. Ennek eredményeként margin-inline-endugyanúgy viselkedik, mint margin-bottom. 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-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-start egyetlen hosszúságot vagy kulcsszó értéket fogad el.

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