Margin-inline-end - CSS-Tricks

margin-inline-endProprietatea în CSS definește cantitatea de spațiu de-a lungul marginii exterioare a se încheie un element în direcția inline. Este inclus în specificațiile CSS Logical Properties Level 1, care se află în prezent în Working Draft.

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

Marginea se termină în direcția inline este determinată de Element writing-mode, directionși text-orientation. Deci, atunci când se utilizează margin-inline-endîntr-un context orizontal de la stânga la dreapta, acționează exact așa margin-rightcum marginea finală a elementului este partea dreaptă.

Dar dacă schimbăm writing-modeverticala, să zicem, elementul este rotit în sensul acelor de ceasornic, plasând marginea de capăt spre partea de jos. Ca rezultat, margin-inline-endse comportă la fel ca margin-bottom. Practic, marginea de pornire este relativă la direcția pe care curge. La asta ne referim când vorbim despre proprietăți „logice”.

Sintaxă

margin-inline-end:

Este cam ciudat să vezi sintaxa unei proprietăți care face referire la sintaxa altei proprietăți CSS chiar în documentație, dar asta este cu adevărat. Ceea ce practic încearcă să spună este că proprietatea acceptă aceleași valori cu margin-topcare urmează această sintaxă:

margin-top: | | auto;

Valoarea initiala: 0
Se aplică: tuturor elementelor, cu excepția elementelor de masă interne, containerelor de bază rubin și containerelor de adnotare rubin
Moștenit: nu
Procente: ca pentru proprietatea fizică corespunzătoare
Valoare calculată: la fel ca margin-*proprietățile corespunzătoare
Tipul animației: după tipul valorii calculate

Valori

margin-block-start acceptă o singură lungime sau valoare de cuvânt cheie.

/* 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;