CSS / padding dan margin: jarak, lebar, dan penggabungan margin

Dalam CSS, padding adalah ruang antara konten dan border, sedangkan margin berada di luar border. Gunakan padding untuk memperluas bagian dalam elemen, termasuk latar belakangnya, dan margin untuk menyesuaikan jarak dari elemen di sekitarnya. Lebar yang dihasilkan bergantung pada box-sizing, dan margin vertikal yang memenuhi syarat dapat saling bergabung daripada hanya dijumlahkan.

Perbedaan padding dan margin

Kotak sebuah elemen terdiri dari konten, padding, border, dan margin, dalam urutan dari dalam ke luar. Latar belakangnya biasanya meluas melalui padding, sedangkan margin bersifat transparan. Meningkatkan padding tombol biasanya memperluas latar belakang dan kotak yang bisa diklik; menambahkan margin tidak membuat celah luar itu bisa diklik.

Kedua properti menerima nilai seperti px, rem, dan %, tetapi padding: auto dan padding negatif tidak valid. Untuk properti jarak fisik pada mode penulisan horizontal biasa, nilai persentase mengacu pada lebar blok kontainer, termasuk nilai atas dan bawah. Nilai tersebut bukan persentase dari tinggi blok tersebut. Definisi model kotak dan jarak W3C

Membaca arah nilai pada bentuk singkat

Singkatan empat nilai dimulai dari atas dan berlanjut searah jarum jam: kanan, bawah, kiri. Dua nilai berarti vertikal dan horizontal; tiga berarti atas, horizontal, bawah. Aturan yang sama berlaku untuk padding dan margin.

Untuk satu sisi, gunakan properti seperti padding-top atau margin-left. padding atau margin shorthand yang digunakan kemudian dapat menimpa nilai sisi yang telah dideklarasikan sebelumnya, jadi periksa urutan aturannya.

Memeriksa lebar melalui contoh lengkap

Simpan kode lengkap di bawah ini sebagai spacing.html dalam UTF-8 dan buka di browser. Tidak diperlukan pustaka atau server. Alpha, Beta, dan kata lainnya adalah label perbandingan. Setelah diedit, simpan dan muat ulang. Pilih masing-masing .box di alat pengembang browser dan periksa diagram box-model atau gaya terhitungnya untuk memeriksa lebar dan jarak.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Perbandingan padding dan margin</title>
  <style>
    body { font-family: sans-serif; max-width: 640px; margin: 0 auto; padding: 16px; }
    h2 { font-size: 1.1rem; }
    .stage { padding: 12px; border: 1px dashed #777; overflow-x: auto; }
    .box { width: 200px; padding: 16px; border: 4px solid #17324d; margin: 24px; background: #dcefff; }
    .content-box { box-sizing: content-box; }
    .border-box { box-sizing: border-box; }
    .asymmetric { box-sizing: border-box; padding: 8px 16px 24px 32px; margin: 10px 20px 30px 40px; }
    .center { box-sizing: border-box; margin: 0 auto; }
    .collapse-demo { display: flow-root; border: 1px dashed #777; }
    .item { height: 30px; background: #dcefff; }
    .first { margin: 0 0 24px; }
    .second { margin: 16px 0 0; }
  </style>
</head>
<body>
  <h1>Perbandingan padding dan margin</h1>
  <h2>content-box</h2>
  <div class="stage"><div class="box content-box">Alpha</div></div>
  <h2>border-box</h2>
  <div class="stage"><div class="box border-box">Beta</div></div>
  <h2>padding / margin</h2>
  <div class="stage"><div class="box asymmetric">Gamma</div></div>
  <h2>margin: 0 auto</h2>
  <div class="stage"><div class="box center">Delta</div></div>
  <h2>margin-bottom / margin-top</h2>
  <div class="collapse-demo">
    <div class="item first">A</div>
    <div class="item second">B</div>
  </div>
</body>
</html>

Alpha memiliki lebar border-box sebesar 200 + 16 × 2 + 4 × 2 = 240px. Termasuk margin horizontalnya, ia menempati 240 + 24 × 2 = 288px. Beta menggunakan ukuran border-box, sehingga lebar border-box-nya adalah 200px dan lebar kontennya adalah 200 - 16 × 2 - 4 × 2 = 160px. Perhitungan ini tidak termasuk padding dan border elemen stage di sekitarnya.

Gamma memiliki padding 8px di atas, 16px di kanan, 24px di bawah, dan 32px di kiri. Marginnya adalah 10px, 20px, 30px, dan 40px dalam urutan yang sama. Bandingkan perbedaan yang terlihat dengan arah singkat di atas.

Menentukan perhitungan ukuran dengan box-sizing

Dengan content-box, lebar menentukan lebar konten, dengan padding dan border ditambahkan di luarnya. Dengan border-box, lebar yang ditentukan sudah termasuk konten, padding, dan border. Tidak ada mode pengukuran yang memasukkan margin dalam lebar. Elemen div biasa awalnya menggunakan content-box, tetapi CSS reset suatu situs dapat mengubah ini; periksa nilai yang dihitung.

Ganti aturan .content-box pada contoh dengan yang berikut. Lebar border-box Alpha berubah dari 240px menjadi 200px. Biarkan nilai lain tetap tidak berubah, bandingkan, dan kembalikan content-box. Jika padding dan border bersama-sama melebihi lebar yang ditentukan, lebar konten tidak dapat menjadi negatif, sehingga kotak yang dihasilkan masih bisa lebih lebar dari yang diharapkan.

.content-box {
  box-sizing: border-box;
}

MDN penjelasan tentang box-sizing

Memusatkan blok dengan margin otomatis

Untuk memusatkan sebuah blok secara horizontal di aliran normal, kotak harus lebih sempit daripada lebar yang tersedia di induknya dan margin kiri serta kanannya harus otomatis. Delta memiliki lebar 200px dan margin: 0 auto, jadi sisa ruang horizontal dibagi di kedua sisi. Pemusatan saja tidak dapat menyelesaikan overflow ketika induk terlalu sempit.

Jika sebuah blok biasa dengan lebar otomatis sudah mengisi ruang horizontal yang tersedia, menambahkan margin samping otomatis tidak memberikan efek pemusatan yang terlihat. Dalam aliran normal, margin-top: auto dan margin-bottom: auto tidak memusatkannya secara vertikal. Margin otomatis dalam Flexbox atau Grid mengikuti aturan tata letak yang berbeda, jadi bedakan konteks tersebut.

Memahami penggabungan margin dan nilai negatif

Margin vertikal yang berdekatan dan memenuhi syarat dapat bergabung dalam tata letak blok biasa. Pada contoh terakhir, margin bawah A sebesar 24px dan margin atas B sebesar 16px keduanya positif, jadi jarak mereka adalah nilai yang lebih besar, yaitu 24px, bukan 40px. Border dari induknya mencegah penggabungan margin antara induk tersebut dan anak-anaknya dalam contoh ini.

Ubah aturan .collapse-demo pada contoh seperti di bawah ini. Anak-anaknya menjadi item Flexbox, yang marginnya tidak saling bergabung, sehingga jaraknya menjadi 24 + 16 = 40px. Bandingkan dan kembalikan display: flow-root. Menerapkan flow-root pada induk saja tidak menghilangkan semua penggabungan margin antara blok saudara.

.collapse-demo {
  display: flex;
  flex-direction: column;
  border: 1px dashed #777;
}

Dalam mode penulisan horizontal yang digunakan di sini, margin kiri dan kanan tidak mengalami penggabungan seperti ini. Ketika margin yang bergabung mencakup nilai positif dan negatif, tambahkan nilai positif terbesar ke nilai negatif dengan nilai absolut terbesar: 24px dan -8px menghasilkan 16px. Jika semua nilai negatif, gunakan nilai negatif terkecil; -8px dan -16px menghasilkan -16px. Deklarasi seperti margin-left: -8px valid tetapi dapat menyebabkan tumpang tindih atau memindahkan konten keluar dari induknya. Periksa layar sempit dan indikator fokus keyboard. Padding negatif tidak dapat menghasilkan efek yang sama. Aturan penggabungan margin W3C

Memeriksa jarak yang tidak sesuai harapan

1. Periksa pengaturan default browser. Margin body default atau margin vertikal default dari p dan h1 dapat membuat jarak terlihat lebih besar daripada deklarasi Anda. Atur ulang elemen yang relevan daripada sekadar menghapus semua jarak.
2. Untuk elemen inline biasa yang tidak diganti seperti span, margin vertikal tidak memengaruhi tata letak baris. Padding inline dapat digambar tanpa mendorong baris di sekitarnya seperti yang diharapkan. Pertimbangkan inline-block atau mode tata letak lainnya ketika kotak perlu ukuran dan jarak yang independen.
3. Gunakan alat pengembang untuk memeriksa bahwa selektor cocok, deklarasi valid, dan aturan dengan prioritas lebih tinggi atau shorthand yang lebih baru tidak menimpanya. Bandingkan juga pada lebar sempit, periksa overflow dan efek padding pada lebar.

Untuk menentukan jarak relatif terhadap arah penulisan, gunakan properti logis seperti padding-inline dan margin-block. Dalam penulisan horizontal biasa, sumbu inline adalah horizontal dan sumbu blok adalah vertikal. Sumbu-sumbu ini berubah dalam penulisan vertikal, sehingga mereka tidak selalu sesuai dengan kiri dan kanan fisik.