End-block-end - Triky CSS | Almanach CSS 2025

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

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

Koncová hrana ve směru bloku je určena elementu writing-mode, directiona text-orientation. Při použití margin-block-endv horizontálním kontextu zleva doprava tedy funguje stejně, jako margin-bottompočáteční hrana prvku je jeho spodní část.

Pokud ale změníme to writing-modena, řekněme, svisle, prvek se otočí a umístí koncovou hranu doprava. Výsledkem je, že se margin-block-endchová stejně margin-right. 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-end:

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-end přijímá jednu délku nebo hodnotu klíčového slova.

/* Length values */ margin-block-end: 20px; margin-block-end: 2rem; margin-block-end: 25%; /* Keyword values */ margin-block-end: auto; /* Global values */ margin-block-end: inherit; margin-block-end: initial; margin-block-end: unset;