Margin-block - CSS-trükkök | CSS Almanach 2025

margin-blockegy rövidített tulajdonság a CSS-ben, amely beállít egy elemet margin-block-startés margin-block-endértéket, mindkettő logikai tulajdonság. Ez teret teremt az elem körül a inline irányba, ami által meghatározott az elem writing-mode, directionés text-orientation.

A tulajdonság a CSS Logikai tulajdonságok és értékek 1. szintű specifikációjának része, amely jelenleg a Szerkesztő Piszkozat állapotában van. Ez azt jelenti, hogy a definíció és az ezzel kapcsolatos információk változhatnak a hivatalos ajánlás között.

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

Ha a writing-modeértéke be van állítva horizontal-lr, a margin-blocktulajdonság ugyanúgy fog működni, mint a margin-topés a beállítás margin-bottom. A tulajdonság egyik érdekes szempontja, hogy ez az egyik logikai tulajdonság, amely nem rendelkezik egy-egy térképpel, amely nem logikai tulajdonsággal rendelkezik. Nincs olyan régebbi tulajdonság, amely mindkét (és csak) blokkirány margót beállítja.

De változtassa meg az elemet writing-modevalami hasonlóra, vertical-lrés az „alsó” él függőleges irányban forog, jobban hasonlítva a margin-leftés a margin-righttulajdonságokra.

Szintaxis

margin-block: (1,2)

Nagyon furcsa látni, hogy az egyik tulajdonság szintaxisa egy másik CSS tulajdonság szintaxisára hivatkozik a dokumentációban, de valójában ez az. Amit alapvetően arra akar mondani, hogy a tulajdonság ugyanazokat az értékeket fogadja el, mint margin-top(legfeljebb kétszer), ami ezt a szintaxist követi:

margin-top: | | auto;

Kezdő érték: 0
Alkalmazható: minden elem, kivéve a belső táblázat elemek, rubin bázis konténerek, és Ruby annotáció konténerek
Örökölt: nem
Százalékok: ami a megfelelő fizikai tulajdonságot illeti
Számított érték: megegyezik a megfelelő margin-*tulajdonságokkal
Animáció típusa: kiszámított értéktípus szerint

Értékek

Ha ismeri a margingyorsírás tulajdonságát, akkor margin-blocknagyon ismerősnek fogja érezni magát. Az egyetlen különbség az, hogy négy helyett két irányban működik.

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