Belajar Koding HTML & CSS Bagian 18: Membuat Box Model CSS
.png)
Box model adalah konsep
penting dalam CSS yang menjelaskan bagaimana elemen HTML diatur dan ditampilkan
di halaman web. Setiap elemen HTML dianggap sebagai kotak yang terdiri dari empat bagian
utama: konten (content), padding, border, dan margin. Konsep ini membantu dalam mengatur ukuran, posisi, dan jarak
antar elemen pada halaman web.
Dalam CSS, box model adalah konsep dasar yang menggambarkan bagaimana elemen HTML ditampilkan sebagai kotak persegi panjang yang terdiri dari beberapa lapisan:
- Content: Isi utama elemen, seperti
teks atau gambar.
- Padding: Ruang antara konten dan batas
elemen.
- Border: Garis yang mengelilingi
padding dan konten.
- Margin: Ruang di luar border yang memisahkan elemen dari elemen lainnya.
Setiap elemen HTML secara default dianggap sebagai kotak yang memiliki keempat lapisan ini.
Contoh Penerapan Box Model
Berikut adalah contoh sederhana
bagaimana menerapkan box model dalam HTML dan CSS:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh
Box Model</title>
<style>
.kotak {
width: 200px;
height: 100px;
padding: 20px;
border: 5px
solid #000;
margin: 15px;
background-color:
#f0f0f0;
}
</style>
</head>
<body>
<div class="kotak">
Ini adalah contoh
box model.
</div>
</body>
</html>
Tampilan Hasil (Output) Box Model CSS
Dalam contoh di atas, elemen <div>
dengan kelas kotak memiliki:
- Lebar
konten:
200px
- Padding: 20px di semua sisi
- Border: 5px solid hitam
- Margin: 15px di semua sisi
Total lebar elemen secara
keseluruhan adalah:
200px (konten) + 2 * 20px (padding) + 2 * 5px (border) =
250px
Total tinggi elemen secara
keseluruhan adalah:
100px (konten) + 2 * 20px (padding) + 2 * 5px (border) =
150px
Mengatur Box Sizing
Secara default, CSS menggunakan box-sizing: content-box, yang berarti padding dan border tidak termasuk dalam
perhitungan width dan height. Namun, dengan mengatur box-sizing: border-box, padding dan border akan termasuk dalam perhitungan
tersebut, sehingga memudahkan dalam mengatur ukuran elemen.
Contoh penggunaan:
* {
box-sizing:
border-box;
}
Dengan pengaturan ini, jika Anda
menetapkan width: 200px, maka lebar total elemen termasuk
padding dan border tetap 200px.
Sumber Belajar Tambahan
- W3Schools:
CSS Box Model
- MDN Web Docs: The box model
- Petani
Kode: Tutorial Box Model CSS
0 Response to "Belajar Koding HTML & CSS Bagian 18: Membuat Box Model CSS"
Post a Comment