Margin-inline-start - CSS-Tricks

margin-inline-startProprietatea în CSS definește cantitatea de spațiu de-a lungul marginii de pornire exterioară a unui 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-start: 25%; writing-mode: vertical-lr; )

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

Dar dacă schimbăm writing-modeverticala, să zicem, elementul este rotit în sensul acelor de ceasornic, plasând marginea de pornire spre partea de sus. Ca rezultat, margin-inline-startse comportă la fel ca margin-top. 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-start:

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