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#
BLOG YANG MIRIP
Beberapa blog yang mirip dengan blog Apa itu CSS Box Model?
Tutorial membuat read progress indikator pada halaman artikel web menggunakan jQuery
Tutorial menggunakan DataTables untuk membuat tabel HTML lebih menarik dan inteaktif
Daftar kupon atau kode gratis yang bisa kamu redeem untuk mendapatkan berbagai macam hadiah pada game Idle Moon Rabbit: AFK RPG
Tutorial menambahkan custom HTML tag pada Quill.js
Tutorial penerapan atribut lazy pada elemen gambar HTML untuk mempersingkat load time page
Item-item apa saja yang bisa kamu beli melalui TV Shopping pada game Harvest Moon: Back to Nature
Apa yang dimaksud konvensi penamaan dalam dunia pemrograman dan apa itu Camel Case, Kebab Case, Snake Case, dan Pascal Case?
Isi cerita Tsuru no Ongaeshi yang ditulis dalam bentuk hiragana dan kanji untuk keperluan latihan membaca bahasa Jepang
Cara mengupgrade peralatan dan kualitas hasil latihan di Green Gym pada game Digimon World 1
Cara cepat dan mudah untuk mendapatkan resource dasar, seperti Coin, Gem, Charm, Summoning Orb, dan Summoning Stone pada game Summoner's Greed
Kata kunci: mengenal, css, box, model, mengenal apa, itu box, model css, apa itu, itu css, css box, box model, mengenal apa itu, apa itu box, itu box model, box model css, apa itu css, itu css box, css box model, mengenal apa itu box, apa itu box model, itu box model css, apa itu css box, itu css box model, mengenal apa itu box model, apa itu box model css, apa itu css box model, mengenal apa itu box model css