Baricode LMS - Padding & Margin

Padding & Margin 📐

Padding dan margin adalah dua property yang paling sering digunakan dalam CSS untuk mengatur jarak dan ruang di dalam maupun di sekitar elemen.

Padding — Ruang di Dalam Border

Padding menambahkan ruang di antara konten elemen dan border-nya. Area padding memiliki warna background yang sama dengan kontennya.

/* Empat sisi sekaligus (nilai sama) */
.kotak { padding: 20px; }

/* Vertikal | Horizontal */
.kotak { padding: 16px 24px; }

/* Atas | Horizontal | Bawah */
.kotak { padding: 10px 20px 15px; }

/* Atas | Kanan | Bawah | Kiri (searah jarum jam) */
.kotak { padding: 10px 20px 15px 8px; }

Atau ditulis per sisi:

.kotak {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 15px;
  padding-left: 8px;
}

Margin — Ruang di Luar Border

Margin menambahkan ruang di luar border, memisahkan elemen dari elemen-elemen di sekitarnya. Margin selalu transparan.

/* Sintaks sama seperti padding */
.kotak { margin: 20px; }
.kotak { margin: 16px 24px; }
.kotak { margin: 10px 20px 15px; }
.kotak { margin: 10px 20px 15px 8px; }

Atau per sisi:

.kotak {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 15px;
  margin-left: 8px;
}

Margin Auto — Centering Horizontal

Nilai auto pada margin kiri dan kanan akan membagi ruang sisa secara merata — efeknya elemen menjadi terpusat horizontal:

.container {
  width: 800px;
  margin: 0 auto; /* atas-bawah: 0, kiri-kanan: auto */
}

/* Atau lebih eksplisit: */
.container {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}

Ini adalah teknik centering horizontal yang paling klasik dan banyak digunakan.

Margin Collapse

Salah satu perilaku CSS yang sering mengejutkan pemula. Ketika dua elemen block bersebelahan secara vertikal, margin mereka bergabung (collapse) — hanya yang terbesar yang diambil:

.paragraf-atas  { margin-bottom: 30px; }
.paragraf-bawah { margin-top: 20px; }

/* Jarak antar keduanya = 30px (bukan 50px!) */

Margin collapse hanya terjadi secara vertikal (atas-bawah), tidak horizontal.

Cara menghindari margin collapse:

/* Gunakan padding alih-alih margin pada parent */
.parent {
  padding-top: 1px; /* cukup 1px untuk "memecah" collapse */
}

/* Atau gunakan flexbox/grid pada parent */
.parent {
  display: flex;
  flex-direction: column;
}

Margin Negatif

Berbeda dengan padding, margin bisa bernilai negatif — efeknya elemen bergerak ke arah berlawanan:

.tumpang-tindih {
  margin-top: -20px; /* elemen bergerak 20px ke atas */
}

.lebih-lebar {
  margin-left: -16px;
  margin-right: -16px; /* elemen lebih lebar dari parent-nya */
}

Perbedaan Padding vs Margin

.contoh-padding {
  padding: 20px;
  background: lightblue;
  /* Area biru mengikutsertakan padding — ruang dalam ikut bewarna */
}

.contoh-margin {
  margin: 20px;
  background: lightblue;
  /* Ruang margin selalu transparan — background tidak meluas ke sana */
}

Aspek	Padding	Margin
Lokasi	Di dalam border	Di luar border
Background	Mengikuti background elemen	Selalu transparan
Nilai negatif	Tidak diizinkan	Diizinkan
Collapse	Tidak terjadi	Terjadi vertikal
Auto	Tidak berlaku	`auto` bisa untuk centering

Kapan Menggunakan yang Mana?

Memberi ruang DI DALAM elemen (antara konten dan tepi)  →  padding
Menjauhkan elemen dari elemen lain                      →  margin
Memperbesar area klik tombol                           →  padding (bukan margin)
Memusatkan elemen secara horizontal                    →  margin: 0 auto
Jarak antar section atau antar elemen                  →  margin

💡 Tips: Banyak developer menggunakan margin-bottom saja (bukan margin-top) untuk jarak antar elemen secara konsisten — ini menghindari masalah margin collapse yang tidak terduga dan membuat pola spacing lebih mudah diprediksi. 🎯

Padding & Margin