Własność CSS inset-inline-start

Własność CSS inset-inline-start określa rozmiar przesunięcia elementu pozycjonowanego względem początku w orientacji śródliniowej jego kontekstu pozycjonowania, który różni się w zależności od kierunku i orientacji tekstu.

Wartości i składnia

Własność inset-inline-start należy do grupy logicznych własności kierunkowych, które w zależności od kierunku i orientacji tekstu mogą odpowiadać fizycznym własnościom kierunkowym top, right, bottom i left.

W związku z tym własność inset-inline-start przyjmuje takie same wartości, jak fizyczne własności kierunkowe (liczbę z jednostką długości, wartość procentową lub słowo kluczowe auto), a ich znaczenie zależy od tego, której z nich odpowiada w danym przypadku.

Na przykład w tekstach pisanych w języku polskim, a więc od lewej i od góry, własność inset-inline-start odpowiada własności left.

Przykłady

W poniższym przykładzie element section będzie odsunięty o 20 pikseli od lewej krawędzi ekranu.

section {
  writing-mode: horizontal-tb;
  position: fixed;
  inset-inline-start: 20px;
  height: 100%;
  width: 20rem;
  border: 4px solid black;
}

Podsumowanie