HTML Tingkat Lanjut
Gabungan Padding & Margin

oleh: Suryo Adhy Chandra, ST

1. Perbedaan Margin dan Padding

Baik margin maupun padding sama-sama menciptakan ruang kosong, tapi posisinya berbeda. Cara mudah mengingatnya: bayangkan sebuah kotak di dalam ruangan.

← margin (jarak ke ruangan) →

← padding (ruang di dalam kotak) →

Konten
Aspek Padding Margin
Posisi jarak Di dalam elemen (antara konten dan border) Di luar elemen (antara elemen dengan elemen lain)
Pengaruh background Background warna mengisi area padding Background tidak mengisi area margin (selalu transparan)
Nilai negatif Tidak bisa negatif Bisa negatif
Mempengaruhi ukuran elemen Ya — elemen jadi lebih besar Tidak — hanya menggeser posisi
auto Tidak mendukung auto Mendukung margin: 0 auto (memusatkan)

Background mengisi area PADDING:

Konten

Area biru muda = padding yang terisi background

Background TIDAK mengisi area MARGIN:

Konten

Area abu-abu = margin yang transparan

2. Mengkombinasikan Padding dan Margin

Dalam praktik nyata, padding dan margin hampir selalu digunakan bersamaan. Padding mengatur tampilan di dalam elemen, margin mengatur posisi dan jarak antar elemen.

Aturan sederhana dalam mengkombinasikan keduanya:

  • Gunakan padding untuk membuat konten di dalam elemen terlihat lega dan nyaman
  • Gunakan margin untuk mengatur jarak elemen tersebut dengan elemen di sekitarnya
/* Kombinasi padding dan margin */ .kartu { padding: 20px; /* ruang di dalam kartu */ margin-bottom: 16px; /* jarak ke kartu berikutnya */ border-radius: 8px; background: white; border: 1px solid #e2e8f0; }

Perbandingan hanya padding, hanya margin, dan kombinasi keduanya:

Hanya padding:

Elemen A
Elemen B

Konten longgar, tapi elemen masih berdempetan

Hanya margin:

Elemen A
Elemen B

Elemen terpisah, tapi konten mepet ke tepi

Kombinasi keduanya:

Elemen A
Elemen B

Konten longgar dan elemen juga terpisah rapi

3. Contoh Penggunaan Margin dan Padding

Contoh 1 — Membuat kartu artikel:

.kartu-artikel { background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; /* ruang di dalam kartu */ margin-bottom: 20px; /* jarak ke kartu berikutnya */ box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .kartu-artikel h3 { margin-top: 0; margin-bottom: 8px; /* jarak judul ke paragraf */ } .kartu-artikel p { margin: 0; }
Judul Artikel Pertama

Ini adalah isi dari artikel pertama. Dengan padding 20px, teks terasa lega dan nyaman dibaca.

Judul Artikel Kedua

Ini adalah isi dari artikel kedua. Margin-bottom pada kartu pertama memberi jarak yang pas antar kartu.

Contoh 2 — Layout menu navigasi:

nav { background: #1e3a8a; padding: 12px 20px; /* ruang di dalam navbar */ } nav a { color: white; text-decoration: none; padding: 8px 14px; /* area klik tombol diperbesar */ margin-right: 4px; /* jarak antar item */ border-radius: 6px; }
Beranda Tentang Blog Kontak

Contoh 3 — Tombol dengan padding dan margin:

.tombol { padding: 10px 24px; /* ukuran area tombol */ margin: 8px; /* jarak antar tombol */ border: none; border-radius: 8px; cursor: pointer; }
Rumus praktis:
  • Elemen terasa sesak di dalamnya? → tambah padding
  • Elemen terlalu berdekatan satu sama lain? → tambah margin
  • Ingin elemen di tengah halaman? → pakai margin: 0 auto + tentukan lebar (width)

Yuk Coba Sendiri!

Salin kode berikut dan coba ubah nilai padding dan margin-nya:

<style> .kotak { background: #dbeafe; border: 2px solid #3b82f6; border-radius: 8px; padding: 16px; /* <-- coba ganti */ margin: 20px; /* <-- coba ganti */ } </style> <div class="kotak">Kotak Pertama</div> <div class="kotak">Kotak Kedua</div> <div class="kotak">Kotak Ketiga</div>
← Kembali Ke Daftar HTML Tingkat Lanjut