Robni blok - CSS-triki | Almanah CSS 2025

margin-blockje stenografska lastnost v CSS, ki nastavi element margin-block-startin margin-block-endvrednosti, ki sta logični lastnosti. To ustvarja prostor okrog elementa v smeri inline, ki je določena z element je writing-mode, directionin text-orientation.

Lastnost je del specifikacije CSS logičnih lastnosti in vrednosti 1, ki je trenutno v stanju osnutka urejevalnika. To pomeni, da se lahko definicija in informacije o njej spremenijo od zdaj do uradnega priporočila.

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

Če writing-modeje nastavljeno na horizontal-lr, bo margin-blocklastnost delovala tako kot nastavitev margin-topin margin-bottom. Zanimiv vidik te lastnosti je, da gre za eno od logičnih lastnosti, ki nima zemljevida ena na ena z nelogično lastnostjo. Ni starejše lastnosti, ki bi določala tako (in samo) robove smeri bloka.

Toda spremenite elemente writing-modena nekaj podobnega vertical-lrin "spodnji" rob se zasuka v navpični smeri in deluje bolj kot lastnosti margin-leftin margin-right.

Sintaksa

margin-block: (1,2)

Nekako čudno je videti, kako se sintaksa ene lastnosti v dokumentaciji sklicuje na sintakso druge lastnosti CSS, toda res je to. V bistvu poskuša reči, da lastnost sprejema enake vrednosti kot margin-top(do dvakrat), ki sledi tej sintaksi:

margin-top: | | auto;

Začetna vrednost: 0
Velja za: vse elemente, razen notranjih elementov tabele, ruby osnovnih vsebnikov in ruby zabeležk
Podedovano: ne
Odstotki: kot za ustrezno fizično lastnost
Izračunana vrednost: enako kot ustrezne margin-*lastnosti
Vrsta animacije: po izračunani vrednosti

Vrednote

Če ste seznanjeni s marginstenografsko lastnino, se margin-blockboste počutili zelo dobro. Razlika je le v tem, da deluje v dve smeri namesto v štiri.

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