Tutorial CSS / Model Kotak CSS: Konten, Padding, Border, dan Margin

Model kotak CSS menjelaskan area konten elemen, padding, border, dan margin luar. Area ini memengaruhi dimensi terlihat dan jaraknya, sementara margin blok vertikal yang berdekatan dapat kolaps dalam kondisi tertentu.

Identifikasi keempat area kotak

Gambar di bawah menunjukkan lokasi dari empat area. Teks atau gambar ditempatkan di dalam konten berwarna biru, dan padding kuning serta border hijau mengelilingi bagian luar. Margin oranye berada di luar border. Warna pada gambar digunakan untuk membedakan area, dan warna latar belakang elemen tidak dicat pada margin itu sendiri.

Dengan pengaturan background-clip bawaan, warna latar yang ditetapkan mengisi area konten dan padding serta digambar hingga di belakang border. Latar belakang elemen tidak digambar di area margin. Oleh karena itu, untuk memperluas area berwarna dari kartu, Anda perlu menambah padding, bukan margin. Sejauh mana latar belakang digambar dapat diubah dengan properti terpisah, tetapi perilaku default digunakan di sini.

Hitung lebar yang dideklarasikan dan lebar luar

.card {
  width: 200px;
  padding: 20px;
  border: 2px solid #2f6e9b;
  margin: 16px;
  background-color: #eaf4fa;
}

Untuk elemen content-box biasa, width: 200px mengukur kontennya. Menambahkan padding 20px dan border 2px di kedua sisi menghasilkan border-box 244px. Margin 16px berada di luar, sehingga total ruang horizontal termasuk kedua margin adalah 276px. Margin vertikal dapat bergabung, jadi jangan menerapkan penjumlahan sederhana ini untuk setiap kasus vertikal. Untuk detail lebih lanjut, lihat Lebar, Tinggi, Batas min/max, dan box-sizing CSS.

Gunakan box-sizing: border-box untuk memasukkan padding dan border dalam lebar yang dideklarasikan. Mengubah hanya properti itu dalam contoh ini menghasilkan border-box 200px dan area konten 156px. Bandingkan ukuran kartu yang sama setelah mengganti nilai box-sizing agar perubahan batas ukur terlihat. Lihat MDN: Pengantar model kotak CSS.

Baca singkatan spasi satu sampai empat nilai

Nilai margin juga ditentukan dalam urutan yang sama. Jika nilainya dua, itu berarti atas dan bawah, kiri dan kanan, jika nilainya tiga berarti atas, kiri dan kanan, bawah, dan jika nilainya empat berarti searah jarum jam dari atas. Jika Anda hanya ingin mengubah beberapa arah, gunakan properti individual seperti padding-top. Jika Anda menulis ulang properti singkat nanti, nilai individual yang ditentukan sebelumnya juga mungkin berubah, jadi periksa urutan penerapannya.

padding-inline dan margin-block adalah properti logis yang berdasarkan arah penulisan teks. Secara umum, pada penulisan horizontal dari kiri ke kanan, inline sesuai dengan kiri dan kanan, sedangkan block sesuai dengan atas dan bawah, tetapi pada penulisan vertikal, arah fisiknya berbeda. Hal ini tidak selalu berarti arah horizontal atau vertikal yang tetap. Anda dapat memeriksa korespondensi arah pada deskripsi margin-block MDN.

Memahami penggabungan margin vertikal

Margin vertikal yang berdekatan dalam aliran blok normal secara kondisional digabung menjadi satu celah. Ini disebut penggabungan margin (margin collapsing). Margin positif di mana margin bawah elemen sebelumnya adalah 20px dan margin atas elemen berikutnya adalah 30px mungkin muncul sebagai nilai yang lebih besar yaitu 30px alih-alih 50px.

Penggabungan margin tidak menggabungkan margin horizontal atau padding, dan margin item Flexbox serta Grid tidak bergabung seperti margin blok aliran normal. Margin induk-anak dan margin negatif memperkenalkan kondisi lain. Latihan ini secara khusus membandingkan hanya margin vertikal positif antara dua blok saudara. Lihat MDN: Penggabungan margin.

Jalankan contoh dan ukur setiap area

Simpan kode di bawah ini sebagai box-model.html dalam UTF-8 dan buka. Kartu pertama memeriksa empat area, dan dua baris di dalam kotak titik-titik digunakan untuk mengamati kolaps margin vertikal. Kotak terakhir menunjukkan padding untuk tiga nilai.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Box model and spacing exercise</title>
  <style>
    body { margin: 16px; font: 16px/1.6 sans-serif; color: #333; }
    .card { width: 200px; padding: 20px; border: 2px solid #2f6e9b;
      margin: 16px; background-color: #eaf4fa; }
    .collapse-demo { max-width: 300px; padding: 8px; border: 1px dashed #777; }
    .row { padding: 8px; background: #e9f7ef; }
    .first { margin-bottom: 20px; }
    .second { margin-top: 30px; }
    .three-values { max-width: 250px; padding: 10px 20px 30px;
      border: 1px solid #b98022; background: #fff4d9; }
  </style>
</head>
<body>
  <h1>The four box areas</h1>
  <div class="card">The content width is 200px; the width including the border is 244px.</div>
  <h2>Vertical margin collapsing</h2>
  <div class="collapse-demo">
    <div class="row first">Bottom margin: 20px</div>
    <div class="row second">Top margin: 30px</div>
  </div>
  <h2>Padding with three values</h2>
  <div class="three-values">Top: 10px; left and right: 20px; bottom: 30px</div>
</body>
</html>

1. Di Developer Tools, di bawah Elements, pilih .card dan lihat tampilan box model di Styles atau Computed. Pastikan kontennya 200px, padding di kiri dan kanan 20px, border 2px, dan margin 16px.
2. Ubah hanya padding menjadi 30px. Konten akan tetap 200px dan lebar hingga border menjadi 264px. Jika Anda mengembalikannya ke 20px semula dan mengubah margin menjadi 32px, lebar kartu itu sendiri akan tetap 244px dan jarak di sekitarnya akan berubah.
3. Lihat antara dua baris di dalam kotak putus-putus. Margin vertikal positif 20px dan 30px digabungkan, menghasilkan jarak 30px. Jika Anda mengubah margin bawah baris pertama menjadi 40px, jaraknya menjadi 40px. Setelah membandingkan, kembalikan ke 20px.
4. Periksa bahwa padding bawah dari .three-values adalah 30px, atas adalah 10px, dan kiri dan kanan adalah 20px. Jika Anda menghapus 30px terakhir sehingga menjadi dua nilai, bagian bawah juga menjadi 10px.

Jarak yang berbeda dari yang diharapkan dapat terjadi karena margin default p·h1 pada browser, selektor dengan spesifisitas lebih tinggi, atau penggabungan margin. Pertama, periksa margin untuk elemen mana dan ubah satu nilai pada satu waktu. Perubahan sementara di alat pengembang hilang saat Anda menyegarkan, dan perubahan yang Anda simpan ke file harus dikembalikan secara manual ke nilai aslinya.