Beranda / CSS / Pemrograman / Web

Mengenal CSS Box Model: Pondasi Utama Desain Web (Tutorial CSS Part 25)

Oleh Sopyan Posting Komentar

Logo CSS
Gambar 25 : Logo CSS

Kalau kamu baru mulai belajar CSS, salah satu konsep penting yang wajib banget dipahami adalah CSS Box Model. Ibaratnya, ini tuh fondasi dari semua elemen yang ada di halaman web. Tanpa paham ini, ngatur layout bisa bikin frustasi.

1. Apa Itu CSS Box Model?

Setiap elemen HTML yang kita kasih styling di CSS, sebenarnya dianggap sebagai sebuah kotak. Nah, kotak ini punya beberapa bagian yang disebut Box Model.

Bayangin kamu punya kotak kardus, berikut bagian-bagiannya:

  • Content: isi dari kotak itu. Bisa berupa teks, gambar, video, dll.
  • Padding: jarak antara isi kotak dan batas dalam kotak. Ini kayak busa pelindung dalam kardus.
  • Border: batas kotaknya. Bisa tebal, tipis, warna-warni, atau bahkan transparan.
  • Margin: jarak antara kotak satu dengan kotak lainnya.

Gambarnya kira-kira begini (bayangkan, ya 😄):

+---------------------------+
|         Margin            |
|  +---------------------+  |
|  |       Border        |  |
|  |  +---------------+  |  |
|  |  |   Padding     |  |  |
|  |  | +-----------+ |  |  |
|  |  | |  Content  | |  |  |
|  |  | +-----------+ |  |  |
|  |  +---------------+  |  |
|  +---------------------+  |
+---------------------------+

2. Mengatur Width dan Height Elemen

Oke, sekarang kita bahas gimana caranya ngatur lebar dan tinggi elemen. Ini penting banget, terutama kalau kamu lagi bikin layout atau desain yang responsif.

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

Tapi tunggu dulu… ini belum termasuk padding, border, dan margin, lho. Kalau kamu kasih padding dan border, total ukuran kotaknya bisa jadi lebih besar dari yang kamu kira.

Contoh:

div {
  width: 300px;
  height: 150px;
  padding: 20px;
  border: 5px solid black;
}

Total lebarnya jadi:

  • Width: 300 + 20 (kiri) + 20 (kanan) + 5 (border kiri) + 5 (border kanan) = 350px
  • Height: 150 + 20 + 20 + 5 + 5 = 200px

Nah, biar ukuran kotaknya tetap sesuai yang kamu atur di width dan height, kamu bisa pakai properti box-sizing.

div {
  box-sizing: border-box;
}

Dengan ini, padding dan border akan "masuk" ke dalam width dan height yang kamu set. Jadi total ukuran kotak tetap 300x150px. Enak, kan?

Contoh Kode Sederhana (HTML + Internal CSS)

Biar makin paham, yuk kita lihat contoh HTML lengkap dengan internal CSS-nya:

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Box Model</title>
  <style>
    .kotak {
      width: 300px;
      height: 150px;
      padding: 20px;
      border: 5px solid black;
      margin: 30px;
      box-sizing: border-box;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>

  <h2>Contoh CSS Box Model</h2>
  <div class="kotak">
    Ini adalah isi dari kotak. Coba lihat padding dan border-nya!
  </div>

</body>
</html>

💡 Kamu bisa copy-paste kode di atas ke file .html dan buka di browser buat lihat hasilnya langsung. Maka hasilnya akan seperti ini:

Contoh CSS Box Model
Gambar 25.1 : Contoh CSS Box Model

Kesimpulan

CSS Box Model itu dasar banget dalam dunia front-end. Dengan ngerti gimana elemen dibungkus dan cara menghitung ukurannya, kamu bakal lebih mudah ngatur layout dan bikin tampilan web yang rapi.

Besok kita bisa bahas topik lainnya seputar CSS—mungkin soal Flexbox atau Grid biar layout-mu makin mantap. Yuk, ngeblog tiap hari bareng-bareng! 🚀

Posting Komentar untuk "Mengenal CSS Box Model: Pondasi Utama Desain Web (Tutorial CSS Part 25)"