CSS Box Model

Box Model, salah satu konsep paling fundamental dalam CSS. Kalau kamu sudah mengerti bagian ini, kamu akan jauh lebih mudah dalam mengatur jarak, tata letak, dan struktur halaman web.

Apa Itu Box Model?

Setiap elemen HTML (seperti <div>, <p>, <img>, dll) dianggap sebagai sebuah kotak (box) oleh browser.

Model ini disebut CSS Box Model, dan terdiri dari 4 lapisan utama:

css-box

Penjelasan Setiap Bagian:

Bagian	Fungsi
Content	Isi sebenarnya (teks, gambar, dll)
Padding	Ruang di dalam border, tapi di luar content
Border	Garis pembatas antara padding dan margin
Margin	Jarak luar antar elemen

Properti CSS Terkait Box Model

Berikut ini merupakan properti css yang sering digunakan untuk box model:

1. `padding`

Mengatur ruang dalam antara content dan border.

p {
  padding: 20px;
}

2. `margin`

Mengatur ruang luar antara elemen dengan elemen lainnya.

p {
  margin: 30px;
}

3. `border`

Menambahkan garis di sekitar elemen.

div {
  border: 2px solid black;
}

4. `width` dan `height`

Mengatur ukuran lebar dan tinggi area content.

div {
  width: 300px;
  height: 150px;
}

Shorthand Box Model

Selain itu kamu juga bisa menggunakan shorthand untuk mengatur padding atau margin sekaligus:

Contoh:

/* Atas, Kanan, Bawah, Kiri */
margin: 10px 15px 20px 25px;

/* Atas & Bawah 10px, Kiri & Kanan 20px */
padding: 10px 20px;

/* Semua sisi 5px */
margin: 5px;

Contoh Kode Lengkap

Contoh kode lengkap dari materi yang sudah kamu pelajari di atas adalah sebagai berikut:

<!DOCTYPE html>
<html>
<head>
  <style>
    .kotak {
      width: 300px;
      padding: 20px;
      margin: 30px auto;
      border: 3px solid #007bff;
      background-color: #e3f2fd;
      text-align: center;
    }
  </style>
</head>
<body>

  <div class="kotak">
    Ini adalah box model!
  </div>

</body>
</html>

Hasilnya:

css-box-model

Catatan Penting

Perlu diperhatikan bahwa untuk setiap area (lebar dan tinggi) dari sebuah elemen html merupakan gabungan dari properti berikut:

Total lebar elemen = width + padding kiri & kanan + border kiri & kanan
Total tinggi elemen = height + padding atas & bawah + border atas & bawah
Gunakan box-sizing: border-box; untuk membuat perhitungan lebih mudah

contoh:

* {
  box-sizing: border-box;
}

Kesimpulan

CSS Box Model sangat penting untuk:

Mengatur jarak antar elemen
Mengontrol tampilan dan layout halaman
Membuat desain yang rapi dan terstruktur