Atrybut CSS inset-inline

Definicja i użycie

inset-inline ustawienie atrybutu elementu w kierunku wiersza w stosunku do jego elementu nadrzędnego.

Uwaga:Aby ten atrybut działał, musisz określić position Atrybut.

inset-inline Atrybut jest skróconą wersją następujących atrybutów:

inset-inline Wartość atrybutu można ustawić na różne sposoby:

Jeśli atrybut inset-inline ma dwie wartości:

inset-inline: 10px 50px;
  • Odległość początkowego końca wynosi 10px
  • Odległość końcowego końca wynosi 50px

Jeśli atrybut inset-inline ma wartość:

inset-inline: 10px;
  • odległość początkowa i końcowa to 10px

CSS inset-inline i inset-block Atrybuty są podobne do CSS top,bottom,left i right Atrybut bardzo podobny, ale inset-block i inset-inline Atrybut zależy od kierunku blokowego i wiersza.

Uwaga:powiązane atrybuty CSS writing-mode i direction Definiuje kierunek wiersza. To wpływa na początek i koniec wiersza oraz inset-inline Wynik atrybutu. Dla stron angielskich kierunek wiersza to z lewej do prawej, a kierunek blokowy to w dół.

Przykład

Przykład 1

Ustawienie odległości między umieszczonym <div> a elementem nadrzędnym w kierunku wiersza:

div {
  inset-inline: 10px 50px;
}

Spróbuj sam!

Przykład 2

Kiedy wartość atrybutu <div> elementu writing-mode Kiedy wartość atrybutu ustawiona jest na vertical-rl, kierunek wiersza to w dół. W rezultacie początek elementu przenosi się z lewej do góry, a koniec z prawej do dołu:

div {
  inset-inline: 15px 30px;
  writing-mode: vertical-rl;
}

Spróbuj sam!

Przykład 3

Kiedy wartość atrybutu <div> elementu direction Kiedy wartość atrybutu ustawiona jest na rtl, kierunek wiersza to z prawej do lewej. W rezultacie początek elementu przenosi się z lewej do prawej, a koniec z prawej do lewej:

div {
  inset-inline: 15px 30px;
  direction: rtl;
}

Spróbuj sam!

CSS syntax

inset-inline: auto|length|initial|inherit;

Wartość atrybutu

Wartość Opis
auto Domyślna wartość. Domyślna odległość inset-inline elementu.
length Określ odległość jednostkami, takimi jak px, pt, cm, itp. Dopuszczalne są wartości ujemne. Zobacz:Jednostki CSS.
% Określ odległość w procentach względem rozmiaru elementu nadrzędnego na odpowiedniej osi.
initial Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit Dziedziczy tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Techniczne szczegóły

Domyślna wartość: auto
Inheredność: Nie
Tworzenie animacji: Obsługiwane. Zobacz:Atrybuty animacji.
Wersja: CSS3
JavaScript syntax: object.style.insetInline="100px 50px"

Obsługa przeglądarek

Liczby w tabeli oznaczają wersje przeglądarek, które w pełni obsługują tę właściwość.

Chrome Edge Firefox Safari Opera
87.0 87.0 63.0 14.1 73.0

powiązane strony

Tutorial:CSS pozycjonowanie

Odnośnik:Atrybut position w CSS

Odnośnik:Atrybut direction w CSS

Odnośnik:Atrybut writing-mode w CSS