Margina-blok - CSS-trikovi | CSS Almanah 2025

margin-blockje stenografsko svojstvo u CSS-u koje postavlja element margin-block-starti margin-block-endvrijednosti, a obje su logička svojstva. To stvara prostor oko elementa u smjeru inline, koji je određen element je writing-mode, directioni text-orientation.

Svojstvo je dio specifikacije CSS logičkih svojstava i vrijednosti 1 koja je trenutno u statusu Editor's Draft. To znači da se definicija i podaci o njoj mogu mijenjati od sada do službene preporuke.

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

Ako writing-modeje postavljeno na horizontal-lr, margin-blocksvojstvo će se ponašati baš kao margin-topi margin-bottom. Zanimljiv je aspekt ovog svojstva da je jedno od logičkih svojstava koje nema pojedinačnu mapu s nelogičkim svojstvom. Ne postoji starije svojstvo koje postavlja obje (i samo) margine smjera bloka.

Ali promijenite elemente writing-modeu nešto slično vertical-lri "donji" rub se zakreće u okomitom smjeru, djelujući više poput margin-lefti margin-rightsvojstava.

Sintaksa

margin-block: (1,2)

Nekako je čudno vidjeti sintaksu jednog svojstva koja upućuje na sintaksu drugog CSS svojstva točno u dokumentaciji, ali to je stvarno ono što jest. Ono što se u osnovi pokušava reći je da svojstvo prihvaća iste vrijednosti kao margin-top(do dva puta) koje slijede ovu sintaksu:

margin-top: | | auto;

Početna vrijednost: 0
Primjenjuje se na: sve elemente, osim na unutarnje elemente tablice, rubinske osnovne spremnike i rubin-bilješke
Naslijeđeno: ne
Procenti: kao za odgovarajuće fizičko svojstvo
Izračunata vrijednost: isto kao i odgovarajuća margin-*svojstva
Vrsta animacije: prema izračunatoj vrsti vrijednosti

Vrijednosti

Ako ste upoznati sa marginstenografskim svojstvom, tada margin-blockćete se osjećati vrlo poznato. Jedina je razlika što radi u dva smjera, umjesto u četiri.

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