Tujuan Belajar
Setelah pelajaran ini, kamu akan bisa:
- Memahami perbedaan elemen block dan inline
- Menggunakan
displayuntuk mengubah perilaku elemen - Menyembunyikan elemen dengan
display: none
Materi Singkat
Pernahkah kamu perhatikan bahwa <h1> selalu memakan satu baris penuh, sementara <a> dan <strong> bisa ada di tengah paragraf? Ini karena setiap elemen HTML punya perilaku display bawaan.
Display: Block
Elemen block memiliki ciri:
- Selalu mulai di baris baru
- Mengambil lebar penuh yang tersedia (kecuali diatur)
- Menghormati
width,height,margin,paddingdari semua sisi
Contoh elemen block: <div>, <p>, <h1>–<h6>, <section>, <article>, <header>, <footer>, <ul>, <li>
Display: Inline
Elemen inline memiliki ciri:
- Mengalir di dalam teks, tidak memulai baris baru
- Lebar mengikuti kontennya saja
widthdanheighttidak berlakumargindanpaddingatas-bawah diabaikan (hanya kiri-kanan yang efektif)
Contoh elemen inline: <a>, <strong>, <em>, <span>, <img> (sedikit khusus), <code>
Display: Inline-Block
Inline-block adalah kombinasi terbaik:
- Mengalir seperti inline (bisa berdampingan dengan elemen lain)
- Tapi menghormati
width,height,margin,paddingseperti block
Sangat berguna untuk tombol, badge, tag, dan layout sederhana.
.tombol {
display: inline-block;
padding: 8px 16px;
background-color: #2563eb;
color: white;
border-radius: 4px;
}Display: None
Menyembunyikan elemen sepenuhnya — seolah tidak ada di halaman (tidak ada ruang yang ditempati):
.tersembunyi {
display: none;
}Mengubah Display
Kamu bisa mengubah display apapun dengan CSS:
/* Membuat list item tampil horizontal */
li {
display: inline;
}
/* Membuat link tampil sebagai block (mengisi lebar penuh) */
nav a {
display: block;
padding: 8px 16px;
}Contoh Kode
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Display CSS</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Demo Display CSS</h1>
<!-- Navigasi horizontal dari li yang semula block -->
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Pelajaran</a></li>
<li><a href="#">Tentang</a></li>
</ul>
</nav>
<!-- Tombol inline-block berdampingan -->
<div>
<a href="#" class="btn btn-primary">Mulai Belajar</a>
<a href="#" class="btn btn-secondary">Lihat Dulu</a>
</div>
<!-- Badge inline -->
<p>
Status: <span class="badge">Aktif</span>
Level: <span class="badge badge-hijau">Pemula</span>
</p>
</body>
</html>*, *::before, *::after { box-sizing: border-box; }
body {
font-family: sans-serif;
padding: 24px;
}
/* Navigasi horizontal */
nav ul {
list-style: none;
padding: 0;
margin: 0 0 24px;
background-color: #1a1a1a;
border-radius: 6px;
}
nav ul li {
display: inline-block; /* list item berjajar horizontal */
}
nav ul li a {
display: inline-block;
padding: 10px 20px;
color: white;
text-decoration: none;
}
nav ul li a:hover {
background-color: #2563eb;
}
/* Tombol */
.btn {
display: inline-block;
padding: 10px 20px;
border-radius: 6px;
font-weight: bold;
text-decoration: none;
margin-right: 8px;
}
.btn-primary {
background-color: #2563eb;
color: white;
}
.btn-secondary {
border: 2px solid #2563eb;
color: #2563eb;
}
/* Badge */
.badge {
display: inline-block;
padding: 2px 10px;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
background-color: #dbeafe;
color: #2563eb;
margin-right: 4px;
}
.badge-hijau {
background-color: #dcfce7;
color: #16a34a;
}Tugas Kecil
Tambahkan ke halaman profilmu:
- Navigasi horizontal di
<header>— ubah<li>di dalam<nav>menjadidisplay: inline-block - Dua tombol di bagian bawah halaman — gunakan
display: inline-blockpada tag<a>:- Tombol "Unduh CV" (style primary — background solid)
- Tombol "Hubungi Saya" (style secondary — hanya border)
- Badge skill di bagian keahlian — bungkus setiap skill dalam
<span class="badge">dan style dengandisplay: inline-block