Začátek bloku bloku - Triky CSS

margin-block-startVlastnost CSS definuje množství prostoru podél vnějšího počáteční hrana prvku ve směru bloku. Je součástí specifikace CSS Logical Properties Level 1, která je aktuálně v pracovní verzi.

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

Výchozí hrana ve směru bloku je určena elementu writing-mode, directiona text-orientation. Při použití margin-block-startv horizontálním kontextu zleva doprava tedy funguje stejně, jako margin-topje počáteční hrana prvku nahoře.

Pokud ale změníme to writing-modena, řekněme, svisle, prvek se otočí a umístí počáteční hranu doleva. Výsledkem je, že se margin-block-startchová stejně margin-left. V podstatě je počáteční hrana relativní ke směru, kterým proudí. To máme na mysli, když mluvíme o „logických“ vlastnostech.

Syntax

margin-block-start:

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, margin-topjaké 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

margin-block-start přijímá jednu délku nebo hodnotu klíč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;