Blok okrajov - Triky CSS | Almanach CSS 2025

margin-blockje skratková vlastnosť v CSS, ktorá nastavuje prvky margin-block-starta margin-block-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-block: 30px 60px; writing-mode: vertical-rl; /* Determines the block start direction */ )

Ak writing-modeje nastavená na horizontal-lr, margin-blockvlastnosť bude fungovať rovnako ako nastavenie margin-topa margin-bottom. 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 smeru bloku tak (a iba).

Ale zmeňte element writing-modena niečo podobné vertical-lra „spodná“ hrana sa otočí vo vertikálnom smere, čím sa bude viac podobať vlastnostiam margin-lefta margin-right.

Syntax

margin-block: (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-blockbudete sa cítiť veľmi dobre. Rozdiel je iba v tom, že funguje v dvoch smeroch namiesto v štyroch.

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