Własność CSS margin-inline to własność zbiorcza CSS służąca do ustawiania szerokości logicznego marginesu początkowego i końcowego w orientacji śródliniowej. Jest to własność niedziedziczona. Obejmuje ona dwie indywidualne własności logicznego marginesu śródliniowego:
Ustawienia własności margin-inline
są odwzorowywane na odpowiednie własności fizyczne marginesów zależnie od kierunku i orientacji pisma. W przypadku dokumentów w językach pisanych od lewej strony i od góry (takich jak polski, angielski itd.) wartości tej własności odpowiadają ustawieniom margin-right
i margin-left
, np.:
div {
background-color: lightpink;
display: inline-block;
}
p {
margin-inline: 20px;
background: coral;
}
...
<div><p>Lorem ipsum dolor sit amet, consectetur.</p></div>
W tym przykładzie zdefiniowaliśmy logiczne marginesy śródliniowe z obu stron na 20 pikseli, czego efekt widać na poniższym zrzucie ekranu:

Jak widać marginesy zostały zastosowane po lewej (margin-left
, logiczny początek elementu) i po prawej (margin-right
, logiczny koniec elementu) stronie.
A teraz tę samą deklarację własności margin-inline
zastosujemy do tekstu pionowego, pisanego od prawej do lewej.
div {
background-color: lightpink;
display: inline-block;
}
p {
margin-inline: 20px;
background: coral;
writing-mode: vertical-rl;
}
...
<div><p>Lorem ipsum dolor sit amet, consectetur.</p></div>
Efekt:

W tym przypadku marginesy również zostały zastosowane na logicznym początku i końcu elementu, ale zmieniła się jego orientacja i stąd też zmiana lokalizacji obszarów marginesów. Teraz pierwsza i druga wartość odpowiadają fizycznym własnościom marginesu margin-top
i margin-bottom
.
Obsługiwane wartości
Typy wartości przyjmowane przez własność margin-inline
:
- Liczby z jednostką długości
- Procenty – wartości procentowe odnoszą się do szerokości (w przypadku dokumentów zawierających tekst w języku pisanym od lewej do prawej strony) nadrzędnego elementu blokowego, czyli zawierającego ten element, dla którego jest zdefiniowany margines.
auto
– szerokość marginesu jest dobierana przez przeglądarkę. Tej wartości czasami używa się do centrowania elementów na stronie.
W jednej deklaracji własności margin-inline
można mieszać różne typy wartości, a więc poniższa deklaracja, choć niezbyt rozsądna, jest prawidłowa:
margin-inline: 10px 4mm;
Wartość początkowa własności margin-inline
to 0
.
Składnia
Własność margin-inline
przyjmuje jedną lub dwie wartości. Jeśli jest jedna wartość, to zostaje ona zastosowana dla obu własności składowych. Jeśli wartości są dwie, to odnoszą się one odpowiednio do własności margin-inline-start
i margin-inline-end
, np.:
margin-inline: 10px;
W powyższym przykładzie marginesy początkowy i końcowy będą miały szerokość po 10 pikseli. Natomiast w poniższym przykładzie margines początkowy będzie miał 10 pikseli szerokości, a końcowy – 20.
margin-inline: 10px 20px;
Ten zapis jest równoważny z poniższym:
margin-inline-start: 10px;
margin-inline-end: 20px;
Zastosowanie
Własność margin-inline
ma zastosowanie do wszystkich elementów z wyjątkiem elementów tabeli, które mają własność display
ustawioną na inną wartość niż table-caption
, table
oraz inline-table
.
Dodatkowo własność margin-inline
działa także w pseudoelementach ::first-letter
i ::first-line
.
Podsumowanie
Zastosowanie | Wszystkie elementy z wyjątkiem elementów tabeli, które mają własność display ustawioną na inną wartość niż table-caption , table oraz inline-table |
---|---|
Obsługiwane wartości |
|
Własności składowe | |
Wartość początkowa | 0 |
Dziedziczenie | Nie |
Specyfikacja | CSS Logical Properties and Values Level 1 – margin-inline-end |