Marginaalilohko - CSS-temppuja | CSS-almanakka 2025

margin-blockon CSS: n lyhytominaisuus, joka asettaa elementin margin-block-startja margin-block-endarvot, jotka molemmat ovat loogisia ominaisuuksia. Se luo tilaa noin elementin inline suuntaan, joka määräytyy elementin writing-mode, directionja text-orientation.

Ominaisuus on osa CSS: n loogisten ominaisuuksien ja arvojen tason 1 määritystä, joka on tällä hetkellä Editorin luonnos -tilassa. Tämä tarkoittaa, että sen määritelmä ja tiedot voivat muuttua nykyisen ja virallisen suosituksen välillä.

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

Jos writing-modearvoksi on asetettu horizontal-lr, margin-blockominaisuus toimii samalla tavalla kuin asetus margin-topja margin-bottom. Yksi tämän ominaisuuden mielenkiintoinen näkökohta on, että se on yksi loogisista ominaisuuksista, jolla ei ole yksi-yhteen -karttaa, jolla on ei-looginen ominaisuus. Ei ole vanhempaa ominaisuutta, joka asettaa molemmat (ja vain) lohkon suunnan marginaalit.

Mutta vaihda elementin writing-modekaltaiseksi vertical-lrja "alareuna" kiertyy pystysuunnassa, joka toimii enemmän kuin margin-leftja margin-right.

Syntaksi

margin-block: (1,2)

On melko outoa nähdä yhden ominaisuuden syntaksin viittaavan toisen CSS-ominaisuuden syntaksiin dokumentaatiossa, mutta se on oikeastaan se. Pohjimmiltaan se yrittää sanoa, että ominaisuus hyväksyy samat arvot kuin margin-top(enintään kaksi kertaa), joka seuraa tätä syntaksia:

margin-top: | | auto;

Alkuarvo: 0
Koskee kaikkia elementtejä paitsi sisäiset pöytäelementit, rubiinipohjasäiliöt ja rubiinihuomautusastiat
Peritty: ei
Prosenttiosuudet: kuten vastaavan fyysisen omaisuuden kohdalla
Laskettu arvo: sama kuin vastaavat margin-*ominaisuudet
Animaatiotyyppi: lasketun arvotyypin mukaan

Arvot

Jos olet perehtynyt marginlyhytaikaiseen omaisuuteen, margin-blocktunnet itsesi hyvin tutuksi. Ainoa ero on, että se toimii kahteen suuntaan neljän sijasta.

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