Marginaali inline-end - CSS-temppuja

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

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

Päätyreuna inline-suunnassa määräytyy elementin writing-mode, directionja text-orientation. Joten, kun käytetään margin-inline-endvaakasuorassa vasemmalta oikealle -kontekstissa, se toimii aivan kuten margin-rightelementin loppureuna on oikea puoli.

Mutta jos vaihdamme writing-modeesimerkiksi pystysuoraan, elementti pyörii myötäpäivään ja sijoittaa loppureunan pohjaa kohti. Tämän seurauksena margin-inline-endkäyttäytyy aivan kuten margin-bottom. Pohjimmiltaan aloitusreuna on suhteessa sen virtaussuuntaan. Sitä tarkoitamme puhuessamme "loogisista" ominaisuuksista.

Syntaksi

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

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