Atrybut CSS inset-block

Poprzednia strona inset
Następna strona inset-block-end

Definicja i zastosowanie

inset-block Odległość elementu ustawień atrybutów w kierunku blokowym od elementu nadrzędnego.

Uwaga:Aby ten atrybut działał, musi być określony position Atrybuty.

inset-block Atrybut jest skrótem dla następujących atrybutów:

inset-block-start
inset-block-end

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

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

inset-block: 10px 50px;

Odległość początkowa to 10px
Odległość końcowa to 50px

Jeśli atrybut inset-block ma jedną wartość:

inset-block: 10px;

Początkowa i końcowa odległość są 10px

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

Uwaga:powiązane atrybuty CSS writing-mode Określa kierunek blokowy. To wpływa na początkową i końcową pozycję bloku oraz na inset-block Wynik atrybutu. Dla stron w języku angielskim, kierunek blokowy jest w dół, a kierunek wewnętrzny od lewej do prawej.

Przykład

Przykład 1

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

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

Spróbuj sam

Przykład 2

Kiedy <div> elementu writing-mode Kiedy atrybut wartości ustawiony jest na vertical-rl, początkowa pozycja elementu przenosi się od góry do prawej, a końcowa pozycja od dołu do lewej:

div {
  inset-block: 10px 50px;
  writing-mode: vertical-rl;
}

Spróbuj sam

Gramatyka CSS

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

Wartość atrybutu

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

Szczegóły techniczne

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