Marginaali - CSS-temppuja | CSS-almanakka 2025

margin-inlineon CSS: n lyhytominaisuus, joka asettaa elementin margin-inline-startja margin-inline-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-inline: 60px auto; writing-mode: vertical-rl; /* Determines the inline start direction */ )

Jos writing-modearvoksi on asetettu horizontal-lr, margin-inlineominaisuus toimii samalla tavalla kuin asetus margin-leftja margin-right. 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) linjasuuntaiset marginaalit.

Mutta vaihda elementin writing-modekaltaiseksi vertical-lrja “inline” -reunat kiertyvät pystysuunnassa toimimalla enemmän margin-topja margin-bottom-ominaisuuksien kanssa.

Syntaksi

margin-inline: (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-inlinetunnet itsesi hyvin tutuksi. Ainoa ero on, että se toimii kahteen suuntaan neljän sijasta.

/* Length values */ margin-inline: 20px 40px; margin-inline: 2rem 4rem; margin-inline: 25% 15%; margin-inline: 20px; /* a single value sets both values */ /* Keyword values */ margin-inline: auto; /* Global values */ margin-inline: inherit; margin-inline: initial; margin-inline: unset;