Vložený okraj - Triky CSS | Almanach CSS 2025

margin-inlineje skratková vlastnosť v CSS, ktorá nastavuje prvky margin-inline-starta margin-inline-endhodnoty, pričom obidve sú logickými vlastnosťami. To vytvára priestor okolo prvku v smere in line, ktorá je určená elementu writing-mode, directiona text-orientation.

Táto vlastnosť je súčasťou špecifikácie úrovne 1 logických vlastností a hodnôt CSS, ktorá je momentálne v stave konceptu editora. To znamená, že definícia a informácie o nej sa môžu meniť medzi dnešným dňom a oficiálnym odporúčaním.

.element ( margin-inline: 60px auto; writing-mode: vertical-rl; /* Determines the inline start direction */ )

Ak writing-modeje nastavená na horizontal-lr, margin-inlinevlastnosť bude fungovať rovnako ako nastavenie margin-lefta margin-right. Jedným zaujímavým aspektom tejto vlastnosti je, že je to jedna z logických vlastností, ktorá nemá mapu jedna k jednej s nelogickou vlastnosťou. Neexistuje žiadna staršia vlastnosť, ktorá by nastavovala okraje vloženého smeru tak (a iba).

Ale zmeňte element writing-modena niečo podobné vertical-lra „vložené“ hrany sa otáčajú vo zvislom smere, takže pôsobia viac ako vlastnosti margin-topa margin-bottom.

Syntax

margin-inline: (1,2)

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 ako margin-top(až dvakrát), ktoré 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

Ak poznáte vlastnosť marginskratky, margin-inlinebudete sa cítiť veľmi dobre. Rozdiel je iba v tom, že funguje v dvoch smeroch namiesto v štyroch.

/* Length values */ margin-inline: 20px 40px; margin-inline: 2rem 4rem; margin-inline: 25% 15%; margin-inline: 20px; /* a single value sets both values */ /* Keyword values */ margin-inline: auto; /* Global values */ margin-inline: inherit; margin-inline: initial; margin-inline: unset;