Właściwość CSSModel pudełkowy

margin-inline

Ustawia marginesy na początku i końcu wiersza. Logiczna wersja margin-left i margin-right, która rozumie kierunek pisma.

Wartość domyślna: 0
Dziedziczona: Nie
Animowalna: tak, jako długość lub procent
Dotyczy: wszystkie elementy poza wewnętrznymi elementami tabel
JavaScript: element.style.marginInline = "auto"

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Wartości
Wartości w praktyce
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

CSS

.toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
}

.toolbar .logout {
  margin-inline-start: auto;
}

HTML przykładu

<style>
  .toolbar { padding: 8px 12px; border-radius: 12px; background: #18181b; }
  .toolbar + .toolbar { margin-top: 10px; }
  .toolbar a { color: inherit; text-decoration: none; }
  .toolbar .logout { padding: 4px 12px; border-radius: 8px; background: #3f3f46; }
</style>
<nav class="toolbar">
  <strong>CodeWorlds</strong>
  <a href="#">Kursy</a>
  <a href="#" class="logout">Wyloguj</a>
</nav>
<nav class="toolbar" dir="rtl">
  <strong>CodeWorlds</strong>
  <a href="#">Kursy</a>
  <a href="#" class="logout">Wyloguj</a>
</nav>

Podgląd

Jedna reguła obsługuje oba kierunki. W górnym pasku przycisk wylogowania trafia na prawo, a w dolnym, z dir="rtl", na lewo, bez żadnych dodatkowych stylów.

Definicja i zastosowanie

Właściwość margin-inline to skrót dla margin-inline-start i margin-inline-end, czyli marginesów na początku i na końcu osi liniowej. Oś liniowa biegnie tak, jak płynie tekst w wierszu. W języku polskim oznacza to lewą i prawą stronę, więc margin-inline: 16px działa jak margin-left: 16px; margin-right: 16px.

Różnica wychodzi przy innym kierunku pisma. W języku arabskim czy hebrajskim (dir="rtl") wiersz zaczyna się po prawej, więc margines początkowy też przenosi się na prawo. W piśmie pionowym (writing-mode: vertical-rl) wiersze biegną z góry na dół i marginesy liniowe lądują na górze i na dole. Fizyczne margin-left zostaje po lewej bez względu na język.

Bliźniaczy skrót margin-block ustawia marginesy na osi blokowej, wzdłuż której układają się kolejne akapity. W zwykłym poziomym tekście to góra i dół, a składowe to margin-block-start i margin-block-end. W obu skrótach jedna wartość trafia na oba końce, a dwie oznaczają kolejno początek i koniec. Każda może być długością, procentem albo auto.

Przydatny szczegół: margin-inline: auto wyśrodkowuje blok o ustalonej szerokości i nie rusza marginesów górnego ani dolnego, w przeciwieństwie do margin: 0 auto. Marginesy na osi blokowej łączą się między sąsiadami tak samo jak górny i dolny.

Składnia

margin-inline: <początek> <koniec>?;
margin-block: <początek> <koniec>?;

Wartości

40px
<długość>
Jedna wartość: po 40px na początku i na końcu wiersza, czyli z lewej i z prawej. Paski tła pokazują marginesy.
80px 0
początek koniec
Pierwsza wartość to początek, druga koniec. W tekście pisanym od lewej margines pojawia się tylko po lewej stronie.
auto
Przy ustalonej szerokości (tu inline-size: 140px) auto po obu stronach wyśrodkowuje blok, a marginesy górny i dolny zostają bez zmian.
dir="rtl"
tekst od prawej
Ta sama deklaracja 80px 0, ale w kontenerze z dir="rtl". Wiersz zaczyna się po prawej, więc margines też przenosi się na prawo.
vertical-rl
pismo pionowe
W piśmie pionowym wiersz biegnie z góry na dół, więc margines początkowy ląduje na górze. Element stoi przy prawej krawędzi, bo w vertical-rl kolejne bloki układają się od prawej do lewej.
margin-block: 24px
oś blokowa
Skrót dla osi blokowej. W poziomym tekście dodaje po 24px nad elementem i pod nim.

Wartość	Typ	Opis
40px	<długość>	Jedna wartość: po 40px na początku i na końcu wiersza, czyli z lewej i z prawej. Paski tła pokazują marginesy.
80px 0	początek koniec	Pierwsza wartość to początek, druga koniec. W tekście pisanym od lewej margines pojawia się tylko po lewej stronie.
auto		Przy ustalonej szerokości (tu `inline-size: 140px`) `auto` po obu stronach wyśrodkowuje blok, a marginesy górny i dolny zostają bez zmian.
dir="rtl"	tekst od prawej	Ta sama deklaracja `80px 0`, ale w kontenerze z `dir="rtl"`. Wiersz zaczyna się po prawej, więc margines też przenosi się na prawo.
vertical-rl	pismo pionowe	W piśmie pionowym wiersz biegnie z góry na dół, więc margines początkowy ląduje na górze. Element stoi przy prawej krawędzi, bo w `vertical-rl` kolejne bloki układają się od prawej do lewej.
margin-block: 24px	oś blokowa	Skrót dla osi blokowej. W poziomym tekście dodaje po 24px nad elementem i pod nim.

Wartości w praktyce

40px

Jedna wartość: po 40px na początku i na końcu wiersza, czyli z lewej i z prawej. Paski tła pokazują marginesy.

.demo { margin-inline: 40px; }

80px 0

Pierwsza wartość to początek, druga koniec. W tekście pisanym od lewej margines pojawia się tylko po lewej stronie.

.demo { margin-inline: 80px 0; }

auto

Przy ustalonej szerokości (tu inline-size: 140px) auto po obu stronach wyśrodkowuje blok, a marginesy górny i dolny zostają bez zmian.

.demo { inline-size: 140px; margin-inline: auto; }

dir="rtl"

Ta sama deklaracja 80px 0, ale w kontenerze z dir="rtl". Wiersz zaczyna się po prawej, więc margines też przenosi się na prawo.

.demo { margin-inline: 80px 0; }

vertical-rl

W piśmie pionowym wiersz biegnie z góry na dół, więc margines początkowy ląduje na górze. Element stoi przy prawej krawędzi, bo w vertical-rl kolejne bloki układają się od prawej do lewej.

.lane { writing-mode: vertical-rl; width: 100%; height: 150px; }
.demo { margin-inline: 40px 0; }

margin-block: 24px

Skrót dla osi blokowej. W poziomym tekście dodaje po 24px nad elementem i pod nim.

.demo { margin-block: 24px; }

Obsługa przeglądarek

Szeroko dostępne · od 2021 roku

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Do wyśrodkowania kontenera strony wystarczy margin-inline: auto. W odróżnieniu od margin: 0 auto nie kasuje marginesów górnego i dolnego ustawionych w innej regule.
W rzędzie flex margin-inline-start: auto odpycha element na koniec wiersza, a w wersji od prawej do lewej automatycznie na drugą stronę.
Jeśli strona może kiedyś dostać wersję arabską lub hebrajską, pisz komponenty od razu na właściwościach logicznych. Wystarczy potem ustawić dir="rtl" na elemencie <html>.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz CSS w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs