Model bingkai: Jarak luar CSS

Jarak luar elemen di antara garis bingkai dan area konten. Atribut paling sederhana untuk mengawasi area ini adalah atribut padding.

Atribut padding CSS mendefinisikan area kosong antara garis bingkai elemen dan konten elemen.}

Atribut padding CSS

Atribut padding CSS mendefinisikan jarak belakang elemen. Atribut padding menerima nilai panjang atau nilai persen, tetapi tidak mengizinkan nilai negatif.

Contoh, jika Anda ingin semua elemen h1 memiliki jarak belakang 10 piksel di setiap sisi, cukup seperti ini:

h1 {padding: 10px;}

Anda juga dapat mengatur jarak belakang untuk setiap sisi secara berurutan, masing-masing sisi dapat menggunakan unit atau nilai persen yang berbeda:

h1 {padding: 10px 0.25em 2ex 20%;}

Properti jarak belakang ekivalen

Juga dapat diatur dengan penggunaan empat atribut yang terpisah, masing-masing untuk jarak belakang atas, kanan, bawah, dan kiri:

Anda mungkin sudah berpikir, peraturan berikut menghasilkan efek yang sama seperti aturan singkat di atas:

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

Nilai persen jarak belakang

Dipetik sebelumnya, dapat diatur nilai persen untuk properti jarak belakang elemen. Nilai persen dihitung terhadap lebar elemen induk, seperti margin. Jadi, jika lebar elemen induk berubah, mereka juga akan berubah.

Peraturan berikut mengatur jarak belakang paragraf menjadi 10% lebar elemen induk:

p {padding: 10%;}

Contoh: Jika elemen induk paragraf adalah elemen div, jarak belakangnya harus dihitung berdasarkan lebar div.

<div style="width: 200px;">
<p>Paragraf ini berada di dalam DIV yang memiliki lebar 200 piksel.</p>
</div>

Perhatian:Jarak belakang atas dan bawah disamakan dengan jarak belakang kiri dan kanan; yaitu persen jarak belakang atas dan bawah akan diatur terhadap lebar elemen induk, bukan tinggi.

Contoh CSS jarak belakang:

Semua properti jarak belakang dalam satu deklarasi
Contoh ini memaparkan bagaimana untuk mengatur semua properti jarak belakang dengan penggunaan atribut singkat, dapat ada satu hingga empat nilai.
Atur jarak belakang bawah 1
Contoh ini memaparkan bagaimana untuk mengatur jarak belakang bawah selanggir dengan sentimeter.
Atur jarak belakang bawah 2
Contoh ini memaparkan bagaimana untuk mengatur jarak belakang bawah selanggir dengan persen.
Atur jarak belakang kiri 1
Contoh ini memaparkan bagaimana untuk mengatur jarak belakang kiri selanggir dengan sentimeter.
Atur jarak belakang kiri 2
Contoh ini memaparkan bagaimana untuk mengatur jarak belakang kiri selanggir dengan persen.
Atur margin kanan 1
Contoh ini menunjukkan bagaimana mengatur margin kanan sel dengan nilai sentimeter.
Atur margin kanan 2
Contoh ini menunjukkan bagaimana mengatur margin kanan sel dengan nilai persen.
Atur margin atas 1
Contoh ini menunjukkan bagaimana mengatur margin atas sel dengan nilai sentimeter.
Atur margin atas 2
Contoh ini menunjukkan bagaimana mengatur margin atas sel dengan nilai persen.

Atribut margin dalam CSS

Atribut Deskripsi
padding Atribut singkat. Fungsi adalah untuk mengatur atribut margin dalam elemen dalam satu pernyataan.
padding-bottom Tetapkan margin bawah elemen.
padding-left Tetapkan margin kiri elemen.
padding-right Tetapkan margin kanan elemen.
padding-top Tetapkan margin atas elemen.