Margin-inline - CSS-trükkök | CSS Almanach 2025

margin-inlineegy rövidített tulajdonság a CSS-ben, amely beállít egy elemet margin-inline-startés margin-inline-endértéket, mindkettő logikai tulajdonság. Ez teret teremt az elem körül a inline irányba, ami által meghatározott az elem writing-mode, directionés text-orientation.

A tulajdonság a CSS Logikai tulajdonságok és értékek 1. szintű specifikációjának része, amely jelenleg a Szerkesztő Piszkozat állapotában van. Ez azt jelenti, hogy a definíció és az ezzel kapcsolatos információk változhatnak a hivatalos ajánlás között.

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

Ha a writing-modeértéke be van állítva horizontal-lr, a margin-inlinetulajdonság ugyanúgy fog működni, mint a margin-leftés a beállítás margin-right. A tulajdonság egyik érdekes szempontja, hogy ez az egyik logikai tulajdonság, amely nem rendelkezik egy-egy térképpel, amely nem logikai tulajdonsággal rendelkezik. Nincs olyan régebbi tulajdonság, amely mindkét (és csak) beállítja a beillesztett irány margókat.

De változtassa meg az elemet writing-modevalami hasonlóra, vertical-lrés az „inline” élek függőleges irányban forognak, jobban hasonlítanak a margin-topés a margin-bottomtulajdonságokra.

Szintaxis

margin-inline: (1,2)

Nagyon furcsa látni, hogy az egyik tulajdonság szintaxisa egy másik CSS tulajdonság szintaxisára hivatkozik a dokumentációban, de valójában ez az. Amit alapvetően arra akar mondani, hogy a tulajdonság ugyanazokat az értékeket fogadja el, mint margin-top(legfeljebb kétszer), ami ezt a szintaxist követi:

margin-top: | | auto;

Kezdő érték: 0
Alkalmazható: minden elem, kivéve a belső táblázat elemek, rubin bázis konténerek, és Ruby annotáció konténerek
Örökölt: nem
Százalékok: ami a megfelelő fizikai tulajdonságot illeti
Számított érték: megegyezik a megfelelő margin-*tulajdonságokkal
Animáció típusa: kiszámított értéktípus szerint

Értékek

Ha ismeri a margingyorsírás tulajdonságát, akkor margin-inlinenagyon ismerősnek fogja érezni magát. Az egyetlen különbség az, hogy négy helyett két irányban működik.

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