Baricode LMS - Property Display

Property Display 🖥️

Property display adalah salah satu property CSS yang paling berpengaruh — ia menentukan bagaimana sebuah elemen berperilaku di dalam layout halaman web.

display: block

Elemen block selalu memulai di baris baru dan mengambil selebar halaman (atau parent-nya):

div, p, h1, h2, h3, section, article, header, footer {
  display: block; /* ini adalah nilai default mereka */
}

<div style="background: lightblue;">Div pertama</div>
<div style="background: lightgreen;">Div kedua — di baris baru</div>
<p style="background: lightyellow;">Paragraf — juga di baris baru</p>

Elemen block bisa diatur width, height, margin, dan padding-nya secara penuh.

display: inline

Elemen inline mengalir sejajar dalam baris teks dan hanya mengambil ruang sebesar kontennya:

span, a, strong, em, b, i {
  display: inline; /* nilai default mereka */
}

<p>Teks biasa, <span style="color: red;">ini inline</span>, lanjut teks lagi.</p>

Keterbatasan elemen inline:

Tidak bisa set width dan height
margin dan padding atas-bawah tidak berpengaruh pada layout
Tidak memulai baris baru

display: inline-block

Kombinasi terbaik — mengalir seperti inline tapi bisa diatur ukurannya seperti block:

.badge {
  display: inline-block;
  width: 80px;
  height: 24px;
  padding: 2px 8px;
  background: #3b82f6;
  color: white;
  border-radius: 999px;
  font-size: 12px;
}

<p>Status: <span class="badge">Aktif</span> dan sudah diverifikasi.</p>

display: none

Menyembunyikan elemen sepenuhnya — elemen tidak tampil dan tidak mengambil ruang di layout:

.tersembunyi {
  display: none; /* hilang dari tampilan DAN layout */
}

Berbeda dengan visibility: hidden yang menyembunyikan elemen tapi ruangnya tetap ada:

.transparan {
  visibility: hidden; /* tidak tampil, tapi ruang tetap ada */
}

display: none      → □  [gap hilang]  □
visibility: hidden → □  [___________]  □
                          ↑ ruang tetap ada

display: flex

Mengaktifkan Flexbox — sistem layout satu dimensi yang powerful. Akan dibahas detail di kategori Flexbox:

.kontainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

display: grid

Mengaktifkan CSS Grid — sistem layout dua dimensi:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 kolom sama lebar */
  gap: 16px;
}

Perbandingan block, inline, inline-block

Property	block	inline	inline-block
Mulai baris baru	Ya	Tidak	Tidak
`width` & `height`	Bisa diset	Tidak bisa	Bisa diset
`margin` atas-bawah	Bekerja	Tidak bekerja	Bekerja
Lebar default	100% parent	Selebar konten	Selebar konten
Contoh elemen	`div`, `p`, `h1`	`span`, `a`	(tidak ada default)

Mengubah Display Default

Display default bisa diubah sesuai kebutuhan:

/* Buat link tampil sebagai block (area klik lebih luas) */
nav a {
  display: block;
  padding: 12px 16px;
}

/* Buat li berjajar horizontal */
nav ul li {
  display: inline-block;
}

/* Sembunyikan menu mobile di desktop */
.menu-mobile {
  display: none;
}

@media (max-width: 768px) {
  .menu-mobile { display: block; }
}

💡 Tips: Gunakan display: none untuk toggle visibilitas elemen secara dinamis dengan JavaScript (element.style.display = 'block'). Untuk animasi muncul-hilang, kombinasikan dengan opacity dan transition agar lebih halus. 🎭

Property Display