Začátek okraje - Triky CSS | Almanach CSS 2025

margin-inline-startVlastnost CSS definuje množství prostoru podél vnějšího počáteční hrana 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-start: 25%; writing-mode: vertical-lr; )

Výchozí hrana ve směru in line je určena elementu writing-mode, directiona text-orientation. Takže při použití margin-inline-startv horizontálním kontextu zleva doprava funguje stejně, jako margin-leftpočáteční hrana prvku je levá strana.

Pokud ale změníme to writing-modena, řekněme, svisle, prvek se otočí ve směru hodinových ručiček a počáteční hrana se umístí nahoru. Výsledkem je, že se margin-inline-startchová stejně margin-top. 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-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-inline-start: 20px; margin-inline-start: 2rem; margin-inline-start: 25%; /* Keyword values */ margin-inline-start: auto; /* Global values */ margin-inline-start: inherit; margin-inline-start: initial; margin-inline-start: unset;