Properti padding-inline CSS

Halaman sebelumnya padding-bottom
Halaman berikutnya padding-inline-end

Definisi dan penggunaan

Elemen padding-inline Merupakan ruang dari garis batas ke konten di arah dalam. Ini adalah singkatan dari berbagai atribut berikut:

padding-inline Nilai atribut dapat diatur dengan berbagai cara:

Jika atribut padding-inline memiliki dua nilai:

padding-inline: 10px 50px;

Margin internal awal adalah 10px
Margin internal akhir adalah 50px

Jika atribut padding-inline memiliki nilai:

padding-inline: 10px;

Jarak padding di ujung awal dan akhir adalah 10px

CSS padding-inline dan padding-block Atribut yang sama seperti 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 Mengdefinikan arah inline. Ini akan mempengaruhi posisi awal dan akhir elemen dalam arah inline, serta padding-inline Hasil atribut. Untuk halaman berbahasa Inggris, arah blok adalah ke bawah, dan arah inline adalah dari kiri ke kanan.

Contoh

Contoh 1

Mengatur jarak di kedua sisi arah inline:

div {
  padding-inline: 50px;
}

Coba sendiri

Contoh 2

Ketika atribut <div> element writing-mode Ketika nilai atribut vertical-rl disetel, arah inline adalah ke bawah. Hasilnya, ujung awal elemen dipindahkan ke atas, dan ujung akhir dipindahkan ke bawah:

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

Coba sendiri

Contoh 3

Ketika atribut <div> element direction Ketika nilai atribut rtl disetel, arah inline adalah dari kanan ke kiri. Hasilnya, ujung awal elemen dipindahkan ke kanan, dan ujung akhir dipindahkan ke kiri:

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

Coba sendiri

Syntaks CSS

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

Nilai atribut

Nilai	Deskripsi
auto	Default. Jarak padding-inline baku elemen.
length	Mengatur jarak dengan satuan px, pt, cm, dll. Tidak diizinkan nilai negatif. Lihat:Satuan CSS.
%	Mengatur jarak dengan persentase ukuran dalam arah inline elemen induk.
initial	Atur atribut ini ke nilai default. Lihat: initial.
inherit	Mengambil atribut ini dari elemen induknya. Lihat: inherit.

Detil teknis

Nilai default:	auto
Inheritance:	Tidak
Produksi animasi:	Didukung. Lihat:Atribut yang berhubungan dengan animasi.
Versi:	CSS3
Syntaks JavaScript:	object.style.paddingInline="100px 20px"