author Ahmad Muhardian

Tutorial CSS: Memahami Box Model di CSS

Tutorial Box Model 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:

CSS Box Border

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.

Box model dari sebuah elemen

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.

area box model

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.

Area Content

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

Foto box model

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).

Area padding

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.

Area border

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:

4. Area Margin

Area margin adalah area untuk memberikan jarak antar elemen.

Area margin

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.

Ilustrasi display block dan inline

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:

Hasil latihan box sizing CSS

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.

Visualisasi Box Model

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:

Hasil display Inline

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:

Apa Selanjutnya?

Oke, sejauh ini kita sudah belajar tentang Box Model di CSS. Semoga kamu bisa memahaminya.

Intinya..

yang perlu diingat:

Semua elemen itu bentuknya Box, dan di sana kita bisa terapkan properti CSS untuk Box seperti margin, padding,width, height, border, display dan sebagainya.

Sekian tutorial ini, selamat belajar!

Daftar isi tutorial

  1. Tutorial CSS #01: Pengenalan Dasar CSS untuk Pemula
  2. Tutorial CSS #02: Cara Menulis CSS di HTML
  3. Tutorial CSS #03: Sintaks Dasar CSS yang Harus Kamu Pahami
  4. Tutorial CSS #04: Memahami Selector di CSS
  5. Tutorial CSS #05: Menggunakan Warna di CSS
  6. Tutorial CSS #06: Menggunakan Background di CSS
  7. Tutorial CSS #07: Text Formatting di CSS
  8. Tutorial CSS #08: Menggunakan Font di CSS
  9. Tutorial CSS #09: Menggunakan Garis di CSS (Border)
  10. Tutorial CSS #10: Menentukan ukuran elemen
  11. Tutorial CSS #11: Box Model di CSS
  12. Tutorial CSS #12: Position (Coming soon)
  13. Tutorial CSS #13: Menggunakan Float (Coming soon)
  14. Tutorial CSS3: Cara Menggunakan Bayangan (Shadow)
    15. 🚧 Work in Progress 🚧

    Maaf jika ada link yang belum aktif. Link tersebut masih dalam draft atau sedang dikerjakan. Do'akan agar penulis tetap sehat dan tulisannya cepat terbit 🙏. Kamu juga bisa memberikan dukungan dengan mentrakteer kopi ☕ supaya penulis kuat begadang, hehe.