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

Posted on

Setelah memahami 5 property pembangun CSS Box Model: width, height, padding, border, dan margin. Di panduan kali ini saya akan mengajak rekan-rekan 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. Selaku contoh, dapatkah rekan-rekan menentukan berapa lebar dan tinggi dari kotak berikut ini?

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

Perhatikan gambar berikut:

Gambar ini ialah dimensi sesungguhnya dari box diatas. Setiap lapisan CSS Box Model mempunyai peran di  menambah ukuran box.

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

Untuk tinggi, caranya pun 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).

Namun, untuk apa kita mesti repot-repot menghitung dimensi dari sebuah element HTML?

Cara perhitungan ini benar-benar urgen di mendesain layout dan tampilan halaman web.

Selaku contoh, misalkan rekan-rekan ingin membangun 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 mesti memahami hitung-hitungan CSS Box Model.

Berikutnya, saya akan masuk ke implementasi pemakaian CSS Box Model, salah satunya dengan membangun gallery gambar sederhana yang akan saya bahas di panduan: Membuat Gallery Gambar dengan HTML dan CSS.


eBook CSS Uncover Duniailkom

Seandainya rekan-rekan ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari mendasar hingga fitur terbaru CSS3 seperti animasi dan web mempunyai tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/