Margin-inline-start - CSS-trikovi

margin-inline-startNekretnina u CSS definira količinu prostora uz vanjski početnu ruba elementa u smjeru inline. Uključen je u specifikaciju CSS logičkih svojstava razine 1, koja je trenutno u radnom nacrtu.

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

Početni rub u smjeru inline određuje elementa writing-mode, directioni text-orientation. Dakle, kada se koristi margin-inline-startu vodoravnom kontekstu slijeva udesno, djeluje baš kao margin-leftda je početni rub elementa lijeva strana.

Ali ako promijenimo u writing-mode, recimo, okomito, element se okreće u smjeru kazaljke na satu, postavljajući početni rub prema vrhu. Kao rezultat toga, margin-inline-startponaša se baš kao margin-top. U osnovi je početni rub u odnosu na smjer toka. To je ono što mislimo kad govorimo o "logičkim" svojstvima.

Sintaksa

margin-inline-start:

Nekako je čudno vidjeti sintaksu jednog svojstva koja upućuje na sintaksu drugog CSS svojstva točno u dokumentaciji, ali to je stvarno ono što jest. Ono što se u osnovi pokušava reći jest da svojstvo prihvaća iste vrijednosti kao margin-topšto slijede ovu sintaksu:

margin-top: | | auto;

Početna vrijednost: 0
Primjenjuje se na: sve elemente, osim na unutarnje elemente tablice, rubinske osnovne spremnike i rubin-bilješke
Naslijeđeno: ne
Procenti: kao za odgovarajuće fizičko svojstvo
Izračunata vrijednost: isto kao i odgovarajuća margin-*svojstva
Vrsta animacije: prema izračunatoj vrsti vrijednosti

Vrijednosti

margin-block-start prihvaća jednu duljinu ili vrijednost ključne riječi.

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