Koniec okraja - Triky CSS | Almanach CSS 2025

margin-inline-endVlastnosť CSS definuje množstvo priestoru pozdĺž vonkajšieho koncového okraja prvku v smere in line. Je to zahrnuté v špecifikácii úrovne 1 logických vlastností CSS, ktorá je momentálne v pracovnom koncepte.

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

Koncová hrana v smere in line je určená elementu writing-mode, directiona text-orientation. Pri použití margin-inline-endv horizontálnom kontexte zľava doprava to teda funguje rovnako, ako keby margin-rightkoncová hrana prvku bola pravá strana.

Ak ale zmeníme to writing-modena, povedzme, zvislé, prvok sa otočí v smere hodinových ručičiek a koncová hrana sa umiestni smerom dnu. Vďaka tomu sa margin-inline-endspráva rovnako margin-bottom. Počiatočná hrana je v zásade relatívna k smeru, ktorým preteká. To máme na mysli, keď hovoríme o „logických“ vlastnostiach.

Syntax

margin-inline-end:

Je to čudné vidieť syntax jednej vlastnosti odkazujúcu na syntax inej vlastnosti CSS priamo v dokumentácii, ale je to tak. V podstate sa to snaží povedať, že vlastnosť prijíma rovnaké hodnoty, margin-topaké sa riadia touto syntaxou:

margin-top: | | auto;

Pôvodná hodnota: 0
Vzťahuje sa na: všetky prvky okrem prvkov internej tabuľky, kontajnery rubínovej základne a kontajnery rubínovej anotácie
Zdedené: č
Percentá: pokiaľ ide o zodpovedajúce fyzické vlastnosti
Vypočítaná hodnota: rovnaká ako zodpovedajúce margin-*vlastnosti
Typ animácie: podľa typu vypočítanej hodnoty

Hodnoty

margin-block-start akceptuje jednu dĺžku alebo hodnotu kľúč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;