CSS Box Model

by

Semua element html pada dasarnya adalah berbentuk box / kotak. Di CSS konsep ini dinamakan box-model.

Sebuah box dari element html memiliki ukuran yang akumulasi dari nilai: margin, padding, border dan ukuran content.

Supaya lebih jelas lihat ilustrasi berikut:

Keterangan:

  • Content adalah box yang berisi konten, jika kamu mengatur width dan height maka bagian konten inilah yang diatur.
  • Padding adalah jarak tepi antara content dengan border (garis tepi).
  • Border adalah garis tepi dari box content.
  • Margin adalah jarak dari border dengan element lain yang berdekatan.

Bagaimana cara menghitungnya? Misal saya buat sebuah div dengan id="box-model".

<style type="text/css">
  #box-model {
    width: 250px;
    height: 250px;
    margin: 25px;
    padding: 40px;
    border:10px solid black;
    color: white;
  }
</style>
<div id="box-model">
  isi konten disini
</div>
<div id="box-model">
  isi konten disini
</div>

Dari nilai yang diberikan tadi, total ukurannya adalah:

Panjang = width + margin left + margin right + padding left + padding right + border left + border right

Panjang = 250px + 25px + 25px + 40px + 40px + 10px + 10px = 400px.

Untuk mengukur tinggi juga sama, tinggal ganti nilainya ke tinggi saja.

Tinggi = height + margin top + margin bottom + padding top + padding bottom + border top + border bottom

Tinggi = 250px + 25px + 25px + 40px + 40px + 10px + 10px = 400px.

Mudah kan? Kamu harus paham tentang css box model ini. Karena, jika kamu salah kalkulasi nilai ukuran dari setiap box element, maka tampilan webmu akan jadi sangat jelek.

Yang harusnya total panjang adalah 500px, tapi karena kamu salah kalkulasi jadi hanya 350px. Misal seperti itu.

Leave a Comment