Tutorial CSS: Memahami Box Model di CSS

---

#CSS

Semua elemen HTML sebenarnya bentuknya kotak.

Nggak percaya?

Coba aja buat HTML lalu kasi style ini:

* {
    border: 1px solid red;
}

Style ini akan membuat semua elemen memiliki garis (border) dengan warna merah merona hehe.

Contoh hasilnya akan seperti ini:

Kelihatan kan?

Walau di sana ada yang bentuknya lingkaran, tapi pada dasarnya itu adalah kotak.

Pada tutorial ini, kita akan memahami konsep box model di CSS supaya nanti gampang bikin layout.

Kalau sudah paham konsep box model, mau bikin layout seperti apa pun akan terasa mudah.

Oke..

Mari kita mulai!

Box Model di CSS

Box model adalah model yang dipakai untuk menampilkan elemen HTML di browser. Model ini akan memudahkan kita mengatur ukuran, posisi, dan properti lainnya.

Mengapa gak segitiga, jajar genjang, atau model yang lainnya?

Ya, karena pasti kita akan kesulitan menyusun layout pakai bentuk model-model itu.

Kalau pakai lingkaran, kita mesti tentukan jari-jari atau diameter untuk menentukan ukuran elemen. Kalau segitiga, ya tentu alas dan tingginya yang kita pakai. Bentuk model yang lain juga begitu.

Kalau pakai model kotak kan lebih gampang. Kita bisa tentukan ukuran elemen dari panjang dan lebar.

Selain itu, kotak juga mudah disusun.

Pada CSS Box model terdiri dari empat area.

Apa saja itu?

1. Area konten
2. Area padding
3. Area Border
4. Area Margin

Jadi tiap element HTML akan punya area 4 kotak ini. Ya, ibarat sebuah ruangan, pasti ada area lantai, area dinding, dan area di luar ruangan.

Kalau kita gambarkan dalam ilustrasi bingkai foto, kira-kira akan seperti ini pembagian areanya.

Biar lebih paham, mari kita bahas satu-per-satu:

1. Area Konten

Area konten merupakan area di mana konten kita akan ditampilkan. Biasanya area ini berisi teks dan gambar atau bisa juga berisi elemen lainnya. Area ini berada di paling dalam box model.

Kalau kita ibaratkan sebuah foto, maka area konten ini adalah fotonya. Sedangkan border adalah bingkai/frame fotonya.

Jika elemen berupa block bukan inline, ada beberapa properti yang bisa kita gunakan untuk area ini:

• width buat menentukan lebar area konten
• height buat menentukan tinggi area konten
• max-width dan min-width buat menentukan batas lebar minimum dan maksimum
• max-height dan min-height buat menentukan batas tinggi minimum dan maksimum

Contoh:

header {
  width: 640px;
  height: 255px;
}

Oh iya, kita belum bahas tentang display inline dan block. Tenang saja, di setelah kita bahas ke-4 area box model ini.. kita akan masuk ke sana.

Untuk saat ini, mari kita lanjutkan dulu bahas:

2. Area Padding

Area padding merupakan area yang memisahkan area konten dengan area border (garis batas).

Buat ngatur jarak area padding, kita bisa pakai properti padding.

• padding properti buat tentukan ukuran padding di semua sisi
• padding-top buat tentukan ukuran padding pada sisi atas
• padding-right buat tentukan ukuran padding pada sisi kanan
• padding-bottom buat tentukan ukuran padding pada sisi bawah
• padding-left buat tentukan ukuran padding pada sisi kiri

Contoh penggunaan:

header {
  padding: 1em;
}

footer {
  padding-top: 1em;
  padding-bottom: 1em;
}

Pada contoh ini, kita mengatur ukuran padding dari elemen <header> dan <footer>. Padding untuk semua sisi elemen <header> adalah 1em dan di element <footer> kita cuma set padding atas dan bawah saja sebesar 1em.

3. Area Border

Area border merupakan area tepi dari elemen. Area ini akan berisi garis yang akan jadi pembatas dengan elemen lainnya.

Adapun properti CSS yang bisa kita pakai untuk area ini adalah:

• border buat ngasi garis pembatas di semua sisi;
• border-top buat ngasi garis di sisi atas;
• border-bottom buat ngasi garis di sisi bawah;
• border-right buat ngasi garis di sisi kanan;
• border-left buat ngasi garis di sisi kiri;
• border-radius buat ngasi lengkungan pada pojok.

Properti-properti ini sudah kita pelajari di tutorial sebelumnya:

• Tutorial CSS: Membuat Garis di CSS

4. Area Margin

Area margin adalah area untuk memberikan jarak antar elemen.

Area margin bisa kita tentukan ukurannya dengan properti berikut:

• margin untuk menentukan ukuran margin di semua sisi;
• margin-top untuk menentukan ukuran margin di sisi atas;
• margin-bottom untuk menentukan ukuran margin di sisi bawah;
• margin-rightuntuk menentukan ukuran margin di sisi kanan;
• margin-leftuntuk menentukan ukuran margin di sisi kiri.

Contoh penggunaan:

article {
  margin-top: 16px;
}

.ads {
  margin: 1em;
}

Pada contoh ini, kita menentukan margin atas untuk elemen <article> sebesar 16px dan margin element dengan class .ads adalah 1em.

Nah, sekarang kita sudah memahami konsep box model di CSS.

Jadi intinya:

Box model ini adalah model yang dipakai di CSS untuk mengatur elemen HTML, seperti ukuran panjang dan lebar, garis, jarak antar elemen (margin), jarak konten dengan garis (padding).

Berikutnya kita akan pelajari bagaimana elemen ditampilkan dengan display.

Display block dan inline

Pada CSS, ada yang namanya atribut display. Atribut ini akan mengatur bagaimana elemen ditampilkan. Biasanya ada dua nilai yang umum kita berikan:

1. inline dan
2. block.

Selain dua nilai ini.. masih ada nilai lagi seperti flex dan grid. Ini nanti akan kita pelajari untuk membuat layout. Untuk sekarang, kita pelajari inline dan block dulu.

Display block adalah mode display untuk membuat elemen ditampilkan dalam satu baris. Sedangkan inline adalah mode display yang akan menampilkan elemen di dalam baris.

Saat kita menggunakan display inline, kita tidak akan bisa mengatur ukuran width dan height dari element. Ukuran width dan height hanya bisa diatur jika elemen ditampilkan secara block.

Contoh:

img {
  display: inline;
}

button {
  display: block;
}

Lalu.. bagaimana caranya saat saya ingin menggunakan width dan height tetapi elemennya harus inline? misalnya seperti sekumpulan tombol yang berjejer dalam satu baris.

Gampang..

Caranya bisa pakai inline-block, mode display ini merupakan gabungan dari inline dan block. Elemen akan ditampilkan secara inline dan juga akan bisa menggunakan properti width dan height.

Contoh:

button {
  display: inline-block;
}

Latihan Box Model

Buatlah file HTML baru dengan nama latihan-box-model.html kemudian isi dengan kode berikut.

Note: ada baiknya kode ini diketik sendiri, bukan di-copas biar kamu makin lancar coding CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Latihan Box Model</title>

  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
      background-color: snow;
    }

    header {
      margin-bottom: 2em;
      text-align: center;
    }

    .button-cta {
      display: block;
      margin-bottom: 1em;
      padding: 0.5em 1em;
      border-radius: 0.5em;
      border: 1px solid navy;
      background-color: royalblue;
      color: white;
    }

    article {
      border: 1px solid silver;
      border-radius: 0.8em;
      padding: 1em;
      margin-bottom: 1em;
      background-color: white;
    }

    .action-buttons {
      margin-top: 1.5em;
    }

    .action-buttons button {
      display: inline;
      margin-right: 1em;
      padding: 0.5em 1em;
      border-radius: 0.8em;
      border: 1px solid silver;
    }

    footer {
      font-size: small;
      margin-top: 6em;
      text-align: center;
    }
  </style>
</head>
<body>
  
  <header>
    <h1>Simple Blog</h1>
    <p>Simple blog page</p>

    <div>
      <button class="button-cta">Login</button>
      <button class="button-cta">Register</button>
    </div>
  </header>

  <article>
    <p>Box model adalah model yang dipakai untuk menampilkan elemen HTML di browser. Model ini akan memudahkan kita mengatur ukuran, posisi, dan properti lainnya.</p>
    
    <div class="action-buttons">
      <button>👍 Like</button>
      <button>🗨️ Comment</button>
      <button>🔗 Share</button>
    </div>
  </article>

  <article>
    <p>Dengan memahami box model, kita akan mudah mengatur space pada elemen. Ini berguna dalam membuat layout supaya terlihat lebih rapi dan estetik.</p>
    
    <div class="action-buttons">
      <button>👍   Like</button>
      <button>🗨️ Comment</button>
      <button>🔗 Share</button>
    </div>
  </article>

  <footer>
    Copyright &copy; Petani Kode
  </footer>

</body>
</html>

Setelah itu, buka di browser. Maka hasilnya:

Mantap!

Pada latihan ini, kita sudah membuat beberapa elemen. Lalu di dalam CSS-nya kita menerapkan styling untuk box model dari tiap elemen, seperti memberikan padding dan margin.

Coba perhatikan di Inspect Element, di sana akan ada visualisasi Box Model dari tiap elemen.

Dengan visualisasi ini kita bisa tahu berapa ukuran padding, margin, dan border dari elemen.

Berikutnya coba eksperimen ubah display elemen button Register dan Login menjadi inline atau inline-block.

Silakan ubah kode CSS pada clas .button-cta menjadi seperti ini:

.button-cta {
  display: inline;
  margin-bottom: 1em;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  border: 1px solid navy;
  background-color: royalblue;
  color: white;
}

Maka hasilnya:

Jika kita mengubah style dari Inspect Element, maka perubahan ini bersifat sementara. Saat halaman di-refresh, maka akan hilang. Inspect element berguna buat coba-coba, kalau nanti hasilnya bagus.. baru kita copy kode CSS-nya ke dalam kode kita.

Baca juga:

• Manfaat Inspect Element untuk Web Developer