Properti padding Style

Definisi dan penggunaan

padding Properti ini mengatur atau mengembalikan margin dalam elemen.

Properti ini dapat menggunakan satu hingga empat nilai:

Properti margin dan Atribut padding Semua menambahkan ruang di sekitar elemen. Tetapi, perbedaan adalah, margin menambahkan ruang di sekitar garis bingkai, sementara padding menambahkan ruang di dalam garis bingkai elemen.

  • Satu nilai, contoh: div {padding: 50px} - seluruh empat sisi akan memiliki margin dalam 50px
  • Dua nilai, contoh: div {padding: 50px 10px} - margin atas dan bawah akan menjadi 50px, margin kiri dan kanan akan menjadi 10px
  • Tiga nilai, seperti: div {padding: 50px 10px 20px} - jarak dalam atas adalah 50px, jarak dalam kiri dan kanan adalah 10px, jarak dalam bawah adalah 20px
  • Empat nilai, seperti: div {padding: 50px 10px 20px 30px} - jarak dalam atas adalah 50px, jarak dalam kanan adalah 10px, jarak dalam bawah adalah 20px, jarak dalam kiri adalah 30px

Lihat pula:

Pelajaran CSS:Padding Dalam CSS

Panduan CSS:Atribut padding

Contoh

Contoh 1

Atur jarak dalam elemen <div>:

document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";

Coba sendiri

Contoh 2

Ubah jarak dalam empat sisi elemen <div> menjadi "25px":

document.getElementById("myDiv").style.padding = "25px";

Coba sendiri

Contoh 3

Kembalikan jarak dalam elemen <div>:

alert(document.getElementById("myDiv").style.padding);

Coba sendiri

Contoh 4

Perbedaan antara atribut margin dan padding:

function changeMargin() {
  document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
  document.getElementById("myDiv2").style.padding = "100px";
}

Coba sendiri

Sintaks

Kembalikan atribut padding:

object.style.padding

Atur atribut padding:

object.style.padding = "%|length|initial|inherit"

Nilai atribut

Nilai Deskripsi
% Didefinisikan dengan persen lebar elemen induk untuk jarak dalam.
length Didefinisikan dengan satuan panjang untuk jarak dalam.
initial Atur atribut ini ke nilai baku. Lihat initial。
inherit Mengambil atribut ini dari elemen induknya. Lihat inherit。

Detil teknis

Nilai baku： 0
Nilai kembalian： String, menunjukkan jarak dalam elemen.
Versi CSS： CSS1

Peramban mendukung

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan