Margin-block - CSS-Tricks | Almanah CSS 2025

margin-blockeste o proprietate stenogramă în CSS care stabilește un element margin-block-startși margin-block-endvalori, ambele fiind proprietăți logice. Se creează spațiu în jurul elementului în direcția în linie, care este determinată de elementul anilor writing-mode, directionși text-orientation.

Proprietatea face parte din specificația CSS Logical Properties and Values Level 1, care se află în prezent în starea Editor's Draft. Asta înseamnă că definiția și informațiile despre aceasta se pot schimba de acum până la recomandarea oficială.

.element ( margin-block: 30px 60px; writing-mode: vertical-rl; /* Determines the block start direction */ )

Dacă writing-modeeste setat la horizontal-lr, margin-blockproprietatea va acționa la fel ca setarea margin-topși margin-bottom. Un aspect interesant al acestei proprietăți este că este una dintre proprietățile logice care nu are o hartă unu-la-unu cu o proprietate non-logică. Nu există nicio proprietate mai veche care să seteze ambele (și numai) marginile de direcție a blocului.

Dar schimbați elementul writing-modecu ceva de genul vertical-lrși marginea „de jos” este rotită în direcția verticală, acționând mai mult ca margin-leftși margin-rightproprietățile și .

Sintaxă

margin-block: (1,2)

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 ca margin-top(de până la două ori) care 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

Dacă sunteți familiarizat cu marginproprietatea de stenografie, atunci margin-blockvă veți simți foarte familiar. Singura diferență este că funcționează în două direcții în loc de patru.

/* Length values */ margin-block: 20px 40px; margin-block: 2rem 4rem; margin-block: 25% 15%; margin-block: 20px; /* a single value sets both values */ /* Keyword values */ margin-block: auto; /* Global values */ margin-block: inherit; margin-block: initial; margin-block: unset;