Model kotak: Margin internal CSS

Margin internal elemen di antara border dan area konten. Atribut paling sederhana untuk mengendalikan area ini adalah atribut padding.

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

Atribut padding CSS

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

Contoh, jika Anda ingin semua elemen h1 memiliki margin 10 paksi di setiap sisi, cukup seperti ini:

h1 {padding: 10px;}

Anda juga dapat mengatur margin setiap sisi berdasarkan urutan atas, kanan, bawah, dan kiri, setiap sisi dapat menggunakan satuan atau nilai persen yang berbeda:

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

Properti margin ekivalen

Juga dapat diset melalui empat atribut yang terpisah, untuk mengatur margin atas, kanan, bawah, dan kiri:

Anda mungkin sudah menduga, aturan 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 margin

Sebelumnya disebutkan, dapat diset nilai persen untuk margin elemen. Nilai persen dihitung terhadap lebar parent, sama seperti margin. Jadi, jika lebar parent berubah, mereka juga akan berubah.

Aturan berikut mengatur margin paragraf menjadi 10% lebar parent elemen:

p {padding: 10%;}

Contoh: Jika elemen parent paragraf adalah elemen div, margin dalamnya harus dihitung berdasarkan width div.

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

Perhatian:Margin atas dan bawah sama dengan margin kiri dan kanan; yaitu persen margin atas dan bawah akan diatur terhadap lebar parent, bukan tinggi.

Contoh properti margin CSS:

Semua properti margin dalam satu deklarasi
Contoh ini menunjukkan bagaimana mengatur semua properti margin dalam satu deklarasi menggunakan atribut singkat, dapat ada satu sampai empat nilai.
Atur margin bawah 1
Contoh ini menunjukkan bagaimana mengatur margin bawah dalam sel menggunakan satuan sentimeter.
Atur margin bawah 2
Contoh ini menunjukkan bagaimana mengatur margin bawah dalam sel menggunakan persen.
Atur margin kiri 1
Contoh ini menunjukkan bagaimana mengatur margin kiri dalam sel menggunakan satuan sentimeter.
Atur margin kiri 2
Contoh ini menunjukkan bagaimana mengatur margin kiri dalam sel menggunakan persen.
Atur jarak internal kanan 1
Contoh ini menunjukkan bagaimana mengatur jarak internal kanan sel menggunakan nilai sentimeter.
Atur jarak internal kanan 2
Contoh ini menunjukkan bagaimana mengatur jarak internal kanan sel menggunakan nilai persen.
Atur jarak internal atas 1
Contoh ini menunjukkan bagaimana mengatur jarak internal atas sel menggunakan nilai sentimeter.
Atur jarak internal atas 2
Contoh ini menunjukkan bagaimana mengatur jarak internal atas sel menggunakan nilai persen.

Atribut Margen Dalam CSS

Atribut Deskripsi
padding Atribut singkat. Fungsi adalah mengatur atribut jarak internal elemen dalam pernyataan satu.
padding-bottom Atur jarak internal bawah elemen.
padding-left Atur jarak internal kiri elemen.
padding-right Atur jarak internal kanan elemen.
padding-top Atur jarak internal atas elemen.