Atrybut padding-inline-start w CSS

Poprzednia strona padding-inline-end
Następna strona padding-left

Definicja i zastosowanie

elementu padding-inline-start Atrybuty odnoszą się do przestrzeni między krawędzią a zawartością w kierunku wewnętrznym.

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

Uwaga:powiązane atrybuty CSS writing-mode i direction Definiuje kierunek wewnętrzny. To wpływa na początkową i końcową pozycję elementu w kierunku wewnętrznym oraz padding-inline-start Wynik atrybutu. Dla stron angielskich, kierunek blokowy jest w dół, a kierunek wewnętrzny od lewej do prawej.

Przykład

Przykład 1

Ustawienie wewnętrznego marginesu w kierunku wewnętrznym:

div {
  padding-inline-start: 50px;
}

Spróbuj sam

Przykład 2

Ustaw atrybut <div> elementu writing-mode Kiedy wartość atrybutu ustawiona jest na vertical-rl, kierunek wewnętrzny to w dół. W rezultacie początkowa pozycja elementu przenosi się z lewej strony na górę:

div {
  writing-mode: vertical-rl;
  padding-inline-start: 100px;
}

Spróbuj sam

Przykład 3

Ustaw atrybut <div> elementu direction Kiedy wartość atrybutu ustawiona jest na rtl, kierunek wewnętrzny to od prawej do lewej. W rezultacie początkowa pozycja elementu przenosi się z lewej strony na prawą:

div {
  direction: rtl;
  padding-inline-start: 100px;
}

Spróbuj sam

Gramatyka CSS

padding-inline-start: auto|value|initial|inherit;

Wartość atrybutu

Wartość	Opis
auto	Domyślnie. Domyślna odległość padding-inline-start elementu.
length	Określa odległość w jednostkach px, pt, cm itp. Nie można używać wartości ujemnych. Zobacz:Jednostki CSS.
%	Określa procentową odległość w stosunku do rozmiaru elementu w kierunku wewnętrznym.
initial	Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit	Inherentuje tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość:	auto
Inherencja:	Nie
Tworzenie animacji:	Wspierane. Zobacz:Atrybuty animacji.
Wersja:	CSS3
Gramatyka JavaScript:	object.style.paddingInlineStart="100px"