Własność CSS inset-block-end

Własność CSS inset-block-end określa rozmiar przesunięcia elementu pozycjonowanego względem końca w orientacji blokowej 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-block-end 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-block-end 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ść logiczna inset-block-end odpowiada własności fizycznej bottom.

Przykłady

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

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

Podsumowanie