Margin-inline - CSS-Tricks | Almanach CSS 2025

margin-inlineto skrócona właściwość w CSS, która ustawia element margin-inline-starti margin-inline-endwartości, z których oba są właściwościami logicznymi. Tworzy przestrzeń wokół elementu w kierunku inline, która jest określana przez elementu writing-mode, directionoraz text-orientation.

Właściwość jest częścią specyfikacji CSS Logical Properties and Values Level 1, która obecnie znajduje się w statusie Editor's Draft. Oznacza to, że definicja i informacje na jego temat mogą ulec zmianie od chwili obecnej do oficjalnych zaleceń.

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

Jeśli writing-modejest ustawiona na horizontal-lr, margin-inlinewłaściwość będzie działać tak samo, jak ustawienie margin-lefti margin-right. Interesującym aspektem tej właściwości jest to, że jest to jedna z właściwości logicznych, która nie ma mapy jeden do jednego z właściwością nielogiczną. Nie ma starszej właściwości, która ustawia oba (i tylko) marginesy kierunku wewnętrznego.

Ale zmień element na writing-modecoś podobnego, vertical-lra „wbudowane” krawędzie zostaną obrócone w kierunku pionowym, zachowując się bardziej jak właściwości margin-topi margin-bottom.

Składnia

margin-inline: (1,2)

To trochę dziwne, że składnia jednej właściwości odwołuje się do składni innej właściwości CSS bezpośrednio w dokumentacji, ale tak naprawdę to jest. Zasadniczo próbuje się powiedzieć, że właściwość przyjmuje te same wartości co margin-top(do dwóch razy), co jest zgodne z następującą składnią:

margin-top: | | auto;

Wartość początkowa: 0
Dotyczy: wszystkich elementów oprócz elementów tabeli wewnętrznej, kontenerów bazowych ruby i kontenerów adnotacji ruby
Odziedziczone: nie
Procenty: jak dla odpowiedniej własności fizycznej
Wartość obliczona: taka sama jak odpowiadające margin-*właściwości
Typ animacji: według obliczonego typu wartości

Wartości

Jeśli znasz marginskrótową właściwość, margin-inlinepoczujesz się bardzo znajomo. Jedyna różnica polega na tym, że działa w dwóch kierunkach zamiast czterech.

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