Marža-inline - CSS-triki | Almanah CSS 2025

margin-inlineje stenografska lastnost v CSS, ki nastavi element margin-inline-startin margin-inline-endvrednosti, ki sta logični lastnosti. To ustvarja prostor okrog elementa v smeri inline, ki je določena z element je writing-mode, directionin text-orientation.

Lastnost je del specifikacije CSS logičnih lastnosti in vrednosti 1, ki je trenutno v stanju osnutka urejevalnika. To pomeni, da se lahko definicija in informacije o njej spremenijo od zdaj do uradnega priporočila.

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

Če writing-modeje nastavljeno na horizontal-lr, bo margin-inlinelastnost delovala tako kot nastavitev margin-leftin margin-right. Zanimiv vidik te lastnosti je, da gre za eno od logičnih lastnosti, ki nima zemljevida ena na ena z nelogično lastnostjo. Ni starejše lastnosti, ki bi določala tako (in samo) robove smernih vrstic.

Toda spremenite elemente writing-modena nekaj podobnega vertical-lrin "vstavljeni" robovi se zasukajo v navpični smeri in delujejo bolj kot lastnosti margin-topin margin-bottom.

Sintaksa

margin-inline: (1,2)

Nekako čudno je videti, kako se sintaksa ene lastnosti v dokumentaciji sklicuje na sintakso druge lastnosti CSS, toda res je to. V bistvu poskuša reči, da lastnost sprejema enake vrednosti kot margin-top(do dvakrat), ki sledi tej sintaksi:

margin-top: | | auto;

Začetna vrednost: 0
Velja za: vse elemente, razen notranjih elementov tabele, ruby osnovnih vsebnikov in ruby zabeležk
Podedovano: ne
Odstotki: kot za ustrezno fizično lastnost
Izračunana vrednost: enako kot ustrezne margin-*lastnosti
Vrsta animacije: po izračunani vrednosti

Vrednote

Če ste seznanjeni s marginstenografsko lastnino, se margin-inlineboste počutili zelo dobro. Razlika je le v tem, da deluje v dve smeri namesto v štiri.

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