Konec okraje - Triky CSS | Almanach CSS 2025

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

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

Koncová hrana ve směru in line je určena elementu writing-mode, directiona text-orientation. Takže při použití margin-inline-endv horizontálním kontextu zleva doprava funguje stejně jako margin-rightkoncová hrana prvku je pravá strana.

Pokud ale změníme to writing-modena, řekněme, svisle, prvek se otočí ve směru hodinových ručiček a koncová hrana se umístí směrem dolů. Výsledkem je, že se margin-inline-endchová stejně margin-bottom. 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-inline-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-start přijímá jednu délku nebo hodnotu klíčového slova.

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