Margina-inline - CSS-trikovi | CSS Almanah 2025

margin-inlineje stenografsko svojstvo u CSS-u koje postavlja element margin-inline-starti margin-inline-endvrijednosti, a obje su logička svojstva. To stvara prostor oko elementa u smjeru inline, koji je određen element je writing-mode, directioni text-orientation.

Svojstvo je dio specifikacije CSS logičkih svojstava i vrijednosti 1 koja je trenutno u statusu Editor's Draft. To znači da se definicija i podaci o njoj mogu mijenjati od sada do službene preporuke.

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

Ako writing-modeje postavljeno na horizontal-lr, margin-inlinesvojstvo će se ponašati baš kao margin-lefti margin-right. Zanimljiv je aspekt ovog svojstva da je jedno od logičkih svojstava koje nema pojedinačnu mapu s nelogičkim svojstvom. Ne postoji starije svojstvo koje postavlja obje (i samo) inline margine smjera.

Ali promijenite elemente writing-modeu nešto slično vertical-lri "inline" rubovi rotiraju se u okomitom smjeru, djelujući više poput margin-topi margin-bottomsvojstava.

Sintaksa

margin-inline: (1,2)

Nekako je čudno vidjeti sintaksu jednog svojstva koja upućuje na sintaksu drugog CSS svojstva točno u dokumentaciji, ali to je stvarno ono što jest. Ono što se u osnovi pokušava reći je da svojstvo prihvaća iste vrijednosti kao margin-top(do dva puta) koje slijede ovu sintaksu:

margin-top: | | auto;

Početna vrijednost: 0
Primjenjuje se na: sve elemente, osim na unutarnje elemente tablice, rubinske osnovne spremnike i rubin-bilješke
Naslijeđeno: ne
Procenti: kao za odgovarajuće fizičko svojstvo
Izračunata vrijednost: isto kao i odgovarajuća margin-*svojstva
Vrsta animacije: prema izračunatoj vrsti vrijednosti

Vrijednosti

Ako ste upoznati sa marginstenografskim svojstvom, tada margin-inlinećete se osjećati vrlo poznato. Jedina je razlika što radi u dva smjera, umjesto u četiri.

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