Belajar CSS Bagian 8 : CSS Display Fundamental: Memahami Perilaku Dasar Elemen HTML

Dalam CSS, properti display adalah salah satu fondasi paling penting dalam mengatur tampilan web.
Banyak masalah layout—elemen turun ke bawah, tidak bisa diatur lebarnya, atau melebar penuh—semuanya hampir selalu berkaitan dengan display.

Karena itu, sebelum masuk ke Flexbox atau Grid, display wajib dipahami dulu secara fundamental.

---

Apa Itu CSS Display?

display menentukan:

bagaimana sebuah elemen HTML ditampilkan,
mengambil ruang,
dan berinteraksi dengan elemen lain di sekitarnya.

Setiap elemen HTML punya display bawaan (default), meskipun kita tidak menuliskannya di CSS.

---

Display Default Elemen HTML

Dua display dasar yang paling sering ditemui adalah:

• display: block

• display: inline

Contoh elemen bawaan:

Elemen	Display default
div	block
p	block
h1–h6	block
span	inline
a	inline
strong	inline

---

1. Display: block

Elemen dengan display: block memiliki sifat:

• Mengambil lebar penuh dari kiri ke kanan

• Selalu mulai di baris baru

• Bisa diatur:

  • width

  • height

  • margin

  • padding

Contoh HTML

<div class="box">Display Block</div> 

Contoh CSS

.box {
  display: block;
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

📌 Meskipun lebarnya 200px, elemen block tetap memaksa baris baru.

---

2. Display: inline

Elemen inline punya perilaku kebalikan dari block.

Sifat utama:

• Tidak memulai baris baru

• Lebarnya hanya sebesar kontennya

• ❌ Tidak bisa diatur:

  • width

  • height

Contoh

<span class="text">Display Inline</span> 

 .text {
  display: inline;
  width: 200px;
  height: 200px;
}

📌 Walaupun kita set width dan height, tidak berpengaruh.

Ini karena inline mengikuti ukuran teks, bukan ukuran box.

---

Perbandingan Block vs Inline

Properti	block	inline
Baris baru	✅	❌
Lebar penuh	✅	❌
Atur width/height	✅	❌
Ikut tinggi konten	❌	✅

---

3. Display: inline-block (PENTING)

inline-block adalah gabungan terbaik dari block dan inline.

Sifatnya:

• Tidak memaksa baris baru (seperti inline)

• Bisa diatur width dan height (seperti block)

• Sangat sering dipakai sebelum Flexbox populer

Contoh

.box {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: salmon;
} 

📌 Elemen:

• Bisa sejajar

• Bisa diatur ukurannya

• Tetap rapi untuk layout sederhana

---

Perbandingan Inline vs Inline-Block

Properti	inline	inline-block
Baris baru	❌	❌
Atur width	❌	✅
Atur height	❌	✅
Ukuran default	Konten	Konten (bisa diubah)

---

4. Display: none

display: none digunakan untuk menghilangkan elemen sepenuhnya.

Ciri-ciri:

• Elemen tidak terlihat

• Elemen tidak mengambil ruang

• Elemen benar-benar hilang dari layout

.hidden {
  display: none;
}

📌 Berbeda dengan visibility: hidden
yang masih menyisakan ruang kosong.

---

Studi Kasus Nyata (Sesuai Penjelasan)

Kasus 1: Span berubah perilaku

span {
  display: block;
}

➡️ Span:

• Sekarang mengambil lebar penuh

• Turun ke baris baru

---

Kasus 2: Block jadi inline

 div { 
     display: inline; 
 } 

➡️ Div:

• Tidak melebar penuh

• Hanya selebar teks

• Tidak bisa diatur width/height

---

Kasus 3: Inline jadi bisa diatur ukuran

 span {
  display: inline-block;
  width: 200px;
  height: 200px;
}

➡️ Sekarang:

• Tetap sejajar

• Bisa diatur ukuran

---

Kenapa Display Itu Fundamental?

Karena:

• Flexbox & Grid dibangun di atas konsep display

• Salah display = layout berantakan

• Display menentukan:

  • alur elemen

  • ruang

  • posisi dasar

Kalau display sudah paham,
belajar layout jadi jauh lebih mudah.

---

Ringkasan Display Fundamental

Display	Fungsi Utama
block	Elemen besar, layout utama
inline	Teks & elemen kecil
inline-block	Elemen sejajar tapi bisa diatur
none	Menghilangkan elemen

---

Ilustrasi CSS Display (Visual Pendukung)

---

Penutup

CSS display bukan sekadar properti biasa, tapi pondasi seluruh layout web.
Sebelum lanjut ke:

• Flexbox

• Grid

• Responsive design

pastikan display block, inline, dan inline-block benar-benar paham.