1. Apa Itu Box Model? Box Model adalah konsep dasar dalam CSS yang mendeskripsikan bagaimana elemen HTML ditampilkan sebagai kotak persegi panjang. Box Model terdiri dari empat bagian utama:
- Content: Konten sebenarnya dari elemen (teks, gambar, dll.).
- Padding: Ruang antara konten dan border.
- Border: Garis pembatas di sekitar padding (atau konten jika padding tidak ada).
- Margin: Ruang di luar border yang memisahkan elemen satu sama lain.
Contoh Box Model:
div {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}Hasil:
- Lebar total elemen = content width (200px) + padding (20px + 20px) + border (5px + 5px) + margin (10px + 10px).
- Total = 270px.
2. Properti Display Display menentukan bagaimana elemen ditampilkan di halaman. Beberapa nilai utama:
- Block: Elemen mengambil seluruh lebar kontainer.
div { display: block; }
- **Inline:** Elemen hanya mengambil lebar kontennya.
```css
span {
display: inline;
}</code></pre>
<!-- /wp:code -->
<!-- wp:list -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li><strong>Inline-block:</strong> Kombinasi antara block dan inline.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->
<!-- wp:paragraph -->
<p>div { display: inline-block; }</p>
<!-- /wp:paragraph -->
<!-- wp:code -->
<pre class="wp-block-code"><code>- **None:** Elemen tidak ditampilkan.
```css
p {
display: none;
}3. Contoh Praktis: Menggunakan Box Model dan Display HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Model dan Display</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">Kotak 1</div>
<div class="box">Kotak 2</div>
</body>
</html>CSS (style.css):
.box {
width: 100px;
height: 100px;
padding: 10px;
border: 2px solid black;
margin: 5px;
display: inline-block;
background-color: lightblue;
}Hasil: Dua kotak berwarna biru muda dengan margin dan border akan tampil di satu baris.
Tinggalkan komentar: