Blokování okrajů - Triky CSS

margin-blockje zkratková vlastnost v CSS, která nastavuje prvky margin-block-starta margin-block-endhodnoty, které jsou logickými vlastnostmi. To vytváří prostor kolem prvku ve směru in line, která je určena elementu writing-mode, directiona text-orientation.

Tato vlastnost je součástí specifikace CSS Logical Properties and Values úrovně 1, která je aktuálně ve stavu konceptu editora. To znamená, že definice a informace o ní se mohou změnit mezi dnešním dnem a oficiálním doporučením.

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

Pokud writing-modeje nastaveno na horizontal-lr, margin-blockvlastnost bude fungovat stejně jako nastavení margin-topa margin-bottom. Jedním zajímavým aspektem této vlastnosti je, že je to jedna z logických vlastností, která nemá mapu jedna k jedné s nelogickou vlastností. Neexistuje žádná starší vlastnost, která nastavuje okraje směru bloku (a pouze).

Ale změňte prvek writing-modena něco jako vertical-lra „spodní“ hrana se otočí ve svislém směru a bude se chovat spíše jako vlastnosti margin-lefta margin-right.

Syntax

margin-block: (1,2)

Je to trochu divné vidět syntaxi jedné vlastnosti odkazovat na syntaxi jiné vlastnosti CSS přímo v dokumentaci, ale to je opravdu to, co to je. V podstatě se snaží říci, že vlastnost přijímá stejné hodnoty jako margin-top(až dvakrát), které následují po této syntaxi:

margin-top: | | auto;

Počáteční hodnota: 0
Platí pro: všechny prvky kromě interních prvků tabulky, kontejnerů rubínové základny a kontejnerů anotací rubínů
Zděděno: ne
Procenta: pokud jde o odpovídající fyzickou vlastnost
Vypočítaná hodnota: stejná jako odpovídající margin-*vlastnosti
Typ animace: podle typu vypočítané hodnoty

Hodnoty

Pokud jste obeznámeni s vlastnostmi marginzkratky, margin-blockbudete se cítit velmi dobře. Jediným rozdílem je, že funguje ve dvou směrech místo ve čtyřech.

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