Marginaalilohko - CSS-temppuja | CSS-almanakka 2025

margin-block-endOminaisuus CSS määrittelee tilan määrä pitkin ulomman päättyy elementin reunaan lohkon suunnassa. Se sisältyy CSS: n loogisten ominaisuuksien tason 1 määrittelyyn, joka on parhaillaan työluonnoksessa.

.element ( margin-block-end: 25%; writing-mode: vertical-lr; )

Lohkon suunnan loppureuna määräytyy elementin writing-mode, directionja avulla text-orientation. Joten, kun käytetään margin-block-endvaakasuorassa vasemmalta oikealle -kontekstissa, se toimii aivan kuten margin-bottomelementin aloitusreuna on sen alaosa.

Mutta jos vaihdamme writing-modeesimerkiksi pystysuoraan, elementti pyörii, sijoittamalla loppureunan oikealle. Tämän seurauksena margin-block-endkäyttäytyy aivan kuten margin-right. Pohjimmiltaan aloitusreuna on suhteessa sen virtaussuuntaan. Sitä tarkoitamme puhuessamme "loogisista" ominaisuuksista.

Syntaksi

margin-block-end:

On melko outoa nähdä yhden ominaisuuden syntaksin viittaavan toisen CSS-ominaisuuden syntaksiin dokumentaatiossa, mutta se on oikeastaan se. Se, mitä se pohjimmiltaan yrittää sanoa, on, että ominaisuus hyväksyy samat arvot kuin margin-topmitä 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

margin-block-end hyväksyy yhden pituuden tai avainsanan arvon.

/* Length values */ margin-block-end: 20px; margin-block-end: 2rem; margin-block-end: 25%; /* Keyword values */ margin-block-end: auto; /* Global values */ margin-block-end: inherit; margin-block-end: initial; margin-block-end: unset;