Začiatočný okraj - Triky CSS

margin-inline-startVlastnosť CSS definuje množstvo priestoru pozdĺž vonkajšieho počiatočné hrana prvku v smere in line. Je to zahrnuté v špecifikácii úrovne 1 logických vlastností CSS, ktorá je momentálne v pracovnom koncepte.

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

Východisková hrana v smere in line je určená elementu writing-mode, directiona text-orientation. Pri použití margin-inline-startv horizontálnom kontexte zľava doprava to teda funguje rovnako, ako margin-leftje začiatočná hrana prvku ľavá strana.

Ak ale zmeníme to writing-modena, povedzme, zvislé, prvok sa otočí v smere hodinových ručičiek, čím sa počiatočná hrana umiestni smerom hore. Vďaka tomu sa margin-inline-startspráva rovnako margin-top. Počiatočná hrana je v zásade relatívna k smeru, ktorým preteká. To máme na mysli, keď hovoríme o „logických“ vlastnostiach.

Syntax

margin-inline-start:

Je to čudné vidieť syntax jednej vlastnosti odkazujúcu na syntax inej vlastnosti CSS priamo v dokumentácii, ale je to tak. V podstate sa to snaží povedať, že vlastnosť prijíma rovnaké hodnoty, margin-topaké sa riadia touto syntaxou:

margin-top: | | auto;

Pôvodná hodnota: 0
Vzťahuje sa na: všetky prvky okrem prvkov internej tabuľky, kontajnery rubínovej základne a kontajnery rubínovej anotácie
Zdedené: č
Percentá: pokiaľ ide o zodpovedajúce fyzické vlastnosti
Vypočítaná hodnota: rovnaká ako zodpovedajúce margin-*vlastnosti
Typ animácie: podľa typu vypočítanej hodnoty

Hodnoty

margin-block-start akceptuje jednu dĺžku alebo hodnotu kľúčového slova.

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