Box Model CSS
Box Model CSS adalah membuat tampilan box atau kotak yang membungkus sebuah elemen HTML. Sebuah box terdiri dari properti-properti CSS dan elemen konten HTML.
Properti yang digunakan adalah margin, border, padding dan elemen konten HTML didalamnya. Untuk lebih jelasnya lihat gambar berikut:
- margin - Area luar dari border yang memberi jarak dengan elemen lainya, margin berwarna transparan atau tidak memiliki warna.
- border - Batas atau Garis tepi diantara margin dan padding, border bisa diubah warnanya.
- padding - Jarak antara konten dan border, padding berwarna transparan sehingga backgroundnya akan mengikuti background konten.
- content - Konten dari box bisa berupa text atau gambar.
Membuat box model dengan menggunakan tag <div>. Tag div adalah tag yang berdiri sendiri dan tidak memiliki nilai sehingga anda bisa bebas mengubahnya.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Latihan Box Model</title>
<style>
div{
width: 300px;
padding: 20px;
border: solid 10px hotpink;
margin: 10px;
background-color: yellow;
}
</style>
</head>
<body>
<h2>Box Model</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</body>
</html>
Properti width adalah untuk mengatur lebar dari box. Jadi pada contoh diatas meskipun content dari box panjang melebihi 300px, lebar dari box akan tetap 300px dan lebar content yang akan menyesuaikan lebar box.
Memahami width pada Box Model
Untuk lebih mudah memahaminya, perhatikan contoh berikut:Asumsikan kita ingin mengatur lebar box total 300px.
<!DOCTYPE html>
<html>
<head>
<title>Latihan Box Model</title>
<style>
div{
width: 260px;
padding: 10px;
border: solid 10px blue;
margin: 0;
}
</style>
</head>
<body>
<img src="saitama-opm.png" width="300px" alt="Saitama" />
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</body>
</html>
Pada contoh tersebut kita ingin membuat sebuah box dengan lebar 300px. Saya menggunakan sebuah gambar sebagai perbandingan. Gambar saya ubah lebarnya menjadi 300px sehingga lebar box seharusnya sama dengan lebar gambar.
Pada properti width saya memasukan nilai 260px. Mengapa demikian? bukankah kita ingin membuat box dengan lebar 300px?
Coba anda perhatikan pada properti padding dan border. Masing-masing memiliki nilai 10px dimana untuk menyatakan sebuah lebar maka sisi kanan dan kiri yang digunakan.
Sehingga pada properti padding akan memiliki nilai untuk membuat sebuah lebar adalah 20px (right + left) begitu juga dengan border memiliki nilai 20px (right + left).
Jadi jika ditotal padding dan border sudah memakai lebar 40px dari lebar box yang akan dibuat.
Maka supaya box model yang dibuat memiliki lebar 300px, nilai width (lebar) pada div harus disesuaikan agar menghasilkan lebar box 300px yaitu 300px - 40px = 260px.
Karena pada contoh tersebut margin di set 0 maka tidak perlu dihitung, kecuali jika anda mengubah ukuran margin maka margin kanan dan kiri juga harus dihitung dan dikurangi dengan lebar div.
Sekian penjelasan tentang box model, jika ada pertanyaan silakan tulis dikolom komentar. Terimakasih.
EmoticonEmoticon