Marginaalin esto-aloitus - CSS-temppuja

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

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

Aloitusreuna lohkon suunnassa määräytyy elementin writing-mode, directionja text-orientation. Joten, kun käytetään margin-block-startvaakasuorassa vasemmalta oikealle -yhteydessä, se toimii aivan kuten margin-topelementin aloitusreuna on sen yläreuna.

Mutta jos vaihdamme writing-modeesimerkiksi pystysuoraan, elementti pyörii asettamalla alkureunan vasemmalle. Tämän seurauksena margin-block-startkäyttäytyy aivan kuten margin-left. Pohjimmiltaan aloitusreuna on suhteessa sen virtaussuuntaan. Sitä tarkoitamme puhuessamme "loogisista" ominaisuuksista.

Syntaksi

margin-block-start:

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-start hyväksyy yhden pituuden tai avainsanan arvon.

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