Margin-block-end - CSS-Tricks

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

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

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

Dar dacă schimbăm writing-modeverticala, să zicem, elementul este rotit, așezând marginea finală spre dreapta. Ca rezultat, margin-block-endse comportă exact așa margin-right. 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-block-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-end acceptă o singură lungime sau valoare de cuvânt cheie.

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