Tutorial Belajar CSS: Cara Menghitung Lebar dan Tinggi CSS Box Model

Setelah memahami 5 property pembangun CSS Box Model: width, height, padding, border, dan margin. Pada tutorial kali ini saya akan mengajak anda untuk menghitung lebar dan tinggi sebuah element HTML.


Menghitung Lebar dan Tinggi Element HTML

Lebar dan tinggi total dari sebuah element HTML terdiri dari penambahan width/height, padding, border, dan margin. Sebagai contoh, dapatkah anda menentukan berapa lebar dan tinggi dari kotak berikut ini?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   div {
     width: 300px;
     height: 200px;
     border: 4px solid #575D63;
     padding: 10px;
     margin: 20px;
     background-color: yellow;
   }
</style>
</head>
<body>
<div></div>
</html>

Berapakah lebar dan tinggi dari box ini

Walaupun di dalam property CSS terdapat property width: 300px dan height: 200px, tapi ini bukanlah lebar dan tinggi keseluruhan dari box tersebut. Dimensi total dari box diatas adalah: 368 pixel x 268 pixel. Dari angka-angka ini?

Perhatikan gambar berikut:

Menghitung CSS Box Model

Gambar ini adalah dimensi sebenarnya dari box diatas. Setiap lapisan CSS Box Model memiliki peran dalam  menambah ukuran box.

Mari kita hitung lebar gambar: 300px width + 2*10px padding + 2*4px border + 2*20px margin = 368 pixel.

Untuk tinggi, caranya juga sama: 200px width + 2*10px padding + 2*4px border + 2*20px margin = 268 pixel.

Perkalian dengan 2 disini perlu karena padding, border, dan margin ada di 2 sisi, yakni kiri dan kanan (untuk lebar) serta atas dan bawah (untuk tinggi).

Tapi, untuk apa kita harus repot-repot menghitung dimensi dari sebuah element HTML?

Cara perhitungan ini sangat penting dalam merancang layout dan tampilan halaman web.

Sebagai contoh, misalkan anda ingin membuat tampilan halaman web yang terdiri 2 kolom: 1 untuk sidebar, 1 lagi untuk konten utama. Berapa lebar dari setiap kolom ini agar pas dengan total 960 pixel? Untuk contoh seperti inilah kita harus memahami hitung-hitungan CSS Box Model.

Berikutnya, saya akan masuk ke implementasi penggunaan CSS Box Model, salah satunya dengan membuat gallery gambar sederhana yang akan saya bahas dalam tutorial: Membuat Gallery Gambar dengan HTML dan CSS.


eBook CSS Uncover Duniailkom
Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.

Tutorial Terkait:

6 Comments

  1. fajar septian
    19 Jan 16
    • Andre
      19 Jan 16
  2. fajar septian
    19 Jan 16
    • Andre
      20 Jan 16
  3. mrifqims
    22 Mar 17
    • Andre
      22 Mar 17

Add Comment