Apa itu CSS Box Model?

Apakah kamu pernah mendengar istilah CSS Box Model? Apa sih sebenarnya CSS Box Model ini? Pada blog kali ini, akan kita telusuri apa sebenarnya CSS Box Model ini.

Apa itu CSS Box Model?

Dalam dunia CSS, secara sederhana Box Model adalah sebuah kotak yang melingkupi sebuah elemen HTML, seperti Padding, Border, dan Margin.

• Padding: jarak antara konten elemen HTML dengan Border, dan transparan
• Border: sebuah pembatas di antara Padding dan Margin, dan bisa diberikan CSS styling seperti Width, Color, dan semacamnya
• Margin: jarak antara Border dengan area luar, dan transparan

Dengan kata lain, Box Model dapat membantu kita mengatur jarak antara satu elemen dengan elemen yang lainnya. Website ini juga menyediakan sebuah tool yang bernama CSS Box Model Generator, yang bisa kamu gunakan untuk membuat Box Modelmu sendiri atau hanya untuk simulasi saja.

Kegunaan lainnya

Selain mengatur jarak antara satu elemen dengan elemen lainnya, Box Model juga dapat membantu kita dalam menghitung lebar dan tinggi suatu elemen HTML. Agar dapat lebih memahaminya, di bawah ini merupakan contoh perhitungannya.

• 320px (lebar area konten elemen) + 20px (padding kiri + padding kanan) + 10px (border kiri + border kanan) = 350px (lebar total)
• 50px (tinggi area konten elemen) + 20px (padding atas + padding bawah) + 10px (border atas + border bawah) = 80px (tinggi total)

Referensi

• https://www.w3schools.com/css/css_boxmodel.asp