Atribut padding-inline-start CSS

Halaman sebelumnya padding-inline-end
Halaman berikutnya padding-left

Definisi dan penggunaan

elemen padding-inline-start Atribut ini mengacu pada ruang dari batas ke konten di awal arah inline.

CSS padding-inline dan padding-block Atribut ini dengan atribut CSS padding-top,padding-bottom,padding-left dan padding-right sama seperti, tetapi padding-inline dan padding-block Atribut ini tergantung pada arah inline dan arah blok.

Perhatian:atribut CSS yang berhubungan writing-mode dan direction Mendefinisikan arah inline. Ini akan mempengaruhi posisi awal dan akhir elemen di arah inline, serta padding-inline-start Hasil atribut. Untuk halaman berbahasa Inggris, arah blok adalah ke bawah, arah inline adalah dari kiri ke kanan.

Contoh

Contoh 1

Atur jarak margin di awal arah inline:

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

Coba sendiri

Contoh 2

Atur atribut <div> writing-mode Ketika nilai atributnya diatur menjadi vertical-rl, arah inline adalah ke bawah. Hasilnya posisi awal elemen bergerak dari kiri ke atas:

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

Coba sendiri

Contoh 3

Atur atribut <div> direction Ketika nilai atributnya diatur menjadi rtl, arah inline adalah dari kanan ke kiri. Hasilnya posisi awal elemen bergerak dari kiri ke kanan:

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

Coba sendiri

Syntaxa CSS

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

Nilai atribut

Nilai	Deskripsi
auto	Standar. Jarak padding-inline-start standar elemen.
length	Tentukan jarak dengan satuan px, pt, cm, dll. Tidak diizinkan nilai negatif. Lihat:Satuan CSS.
%	Tentukan jarak persentase ukuran di arah inline terhadap elemen induk.
initial	Atur atribut ini ke nilai standarnya. Lihat: initial.
inherit	Mengambil atribut ini dari elemen induknya. Lihat: inherit.

Detil teknis

Nilai standar:	auto
Inheritance:	Tidak
Produksi animasi:	Didukung. Lihat:Atribut berhubungan dengan animasi.
Versi:	CSS3
Syntaxa JavaScript:	object.style.paddingInlineStart="100px"