Začiatočný blok bloku - Triky CSS

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

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

Východisková hrana v smere bloku je určená elementu writing-mode, directiona text-orientation. Pri použití margin-block-startv horizontálnom kontexte zľava doprava to teda funguje rovnako, ako margin-topkeď je začiatočná hrana prvku jeho vrcholom.

Ak ale zmeníme to writing-modena, povedzme, zvislé, prvok sa otočí a začiatočná hrana sa umiestni doľava. Vďaka tomu sa margin-block-startspráva rovnako margin-left. 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-block-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-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;