Halo teman-teman, selamat datang kembali dalam course dasar HTML & CSS. Di artikel sebelumnya teman-teman sudah mengetahui Property mengenai List & Table. Nah sekarang teman-teman akan berkenalan dengan konsep Box Model. Semangat!
Apa itu Box Model
Box Model merupakan konsep dasar sekaligus inti yang sangat penting dari pengembangan halaman web. Teman-teman wajib menguasi Box Model ini kalau ingin bisa membuat web. Semua elemen di dalam web merupakan buah dari konsep Box Model.
Agar lebih paham coba perhatikan perumpamaan ini:
Perumpamaan untuk Box Model ini misalnya box kardus. Kardus tersebut tentunya memiliki lebar, tinggi, serta ruang didalamnya. Lebar dan tinggi yang dimaksud adalah Property Width dan Height. Kemudian ruang itu bisa kita sebut dengan Padding. Dan didalam ruang ini, terdapat barang/benda yang di sebut dengan konten/isi.
Kalau digambarkan jadi seperti ini.
- Content
Content atau isi dapat berupa teks, gambar atau video. Konten terletak di tengah tengah elemen.
- Width & height
Width dan Height berfungsi memberikan lebar dan tinggi pada konten.
- Padding
Padding terletak di antara konten dengan Border, fungsinya, memberikan ketebalan untuk memisahkan konten dengan Border.
*: padding tidak dapat menerima nilai negatif
- Border
Border seperti yang teman-teman ketahui merupakan garis tepi yang berada di luar elemen, membatasi antara padding dan margin.
- Margin
Margin adalah unsur terluar yang berfungsi memberikan jarak. Berbeda dengan padding, margin tidak terpengaruh oleh Property seperti Background-color, Tugasnya hanya memisahkan elemen dengan elemen lain disekitarnya.
Contoh penggunaan Box Model:
Kode HTML:
<body>
<div class="box-merah"> Konten </div>
<div class="box-pink"> Konten </div>
<body>Kode CSS:
.box-merah {
width: 300px;
height: 100px;
padding: 20px;
border: 5px solid blue;
margin: 20px;
background-color: red;
}
.box-pink {
width: 600px;
height: 600px;
padding: 0;
border: 5px solid red;
margin: 20px;
background-color: pink;
}Hasilnya:
Dari contoh di atas teman-teman seharusnya teman-teman sudah paham mengenai Box Model. :).
Penutup
Konsep box model ini sebetulnya tidaklah sulit. Agar lebih mudah dalam memahaminya, teman-teman sebaiknya sering berlatih menggunakan Property konsep Box Model di atas.
Kalau teman-teman ada pertanyaan, silahkan isi kolom komentar dibawah.
Next, di pembahasan berikutnya kita akan menyinggung tentang Display & Positioning. Tetap semangat, ikuti terus course ini ya!.
See you next time!
