Własność CSS margin-inline-start

Własność CSS margin-inline-start służy do ustawiania szerokości początkowego marginesu logicznego w orientacji śródliniowej. Jest to własność niedziedziczona.

Ustawienie własności margin-inline-start jest odwzorowywane na odpowiednią własność fizyczną marginesu 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.) ta własność odpowiada własności margin-left, np.:

div {
  background-color: lightpink;
  display: inline-block;
}
p {
  margin-inline-start: 30px;
  background: coral;
}
...
<div><p>Lorem ipsum dolor sit amet.</p></div>

W tym przykładzie zdefiniowaliśmy początkowy logiczny margines śródliniowy o szerokości 30 pikseli, czego efekt jest taki, jak widać na poniższym zrzucie ekranu:

Jak widać margines został zastosowany po lewej stronie, ponieważ to jest logiczny początek elementu w orientacji śródliniowej, i odpowiada mu własność fizyczna margin-left.

A teraz tę samą deklarację własności margin-inline-start zastosujemy do tekstu pionowego, pisanego od prawej do lewej.

div {
  background-color: lightpink;
  display: inline-block;
}
p {
  margin-inline-start: 30px;
  background: coral;
  writing-mode: vertical-rl;
}
...
<div><p>Lorem ipsum dolor sit amet.</p></div>

Efekt:

W tym przypadku margines również został zastosowany na logicznym początku, ale zmieniła się orientacja elementu i stąd też zmiana lokalizacji obszaru marginesu. Teraz własność margin-inline-start odpowiada własności margin-top.

Obsługiwane wartości

Typy wartości przyjmowane przez własność margin-inline-start:

• 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.

Wartość początkowa własności margin-inline-start to 0.

Składnia

Własność margin-inline-start przyjmuje jedną wartość określającą szerokość początkowego logicznego marginesu śródliniowego, np.:

margin-inline-start: 10px;

W powyższym przykładzie początkowy margines śródliniowy będzie miał szerokość 10 pikseli.

Zastosowanie

Własność margin-inline-start 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-start działa także w pseudoelementach ::first-letter i ::first-line.

Podsumowanie