Menguak Rahasia Display Block di CSS: Cara Mudah Membuat Tampilan Web Lebih Teratur dan Menarik

Image by fancycrave1 from Pixabay

Daftar Isi

Pernah nggak sih kamu bertanya-tanya, kenapa saat bikin website, ada elemen yang otomatis “ngeblok” sendiri dan bikin elemen lain turun ke bawah? Nah, itu karena properti CSS yang namanya display: block. Tapi, apa sih sebenarnya display block itu? Kenapa penting banget buat kamu yang lagi belajar web design? Yuk, kita kulik bareng-bareng dengan bahasa yang santai dan mudah dipahami, plus bumbu-bumbu Jawa supaya makin nyamleng!

---

Apa Itu Display Block?

Bayangno kamu lagi nyusun tumpukan batako buat bangun tembok. Setiap batako pasti berdiri sendiri, nggak numpuk di samping batako lain, kan? Nah, di dunia CSS, display block itu ibarat batako yang berdiri tegak sendiri, memenuhi lebar barisnya, dan bikin elemen berikutnya otomatis pindah ke baris baru.

Secara teknis, display block adalah nilai dari properti display yang membuat elemen HTML tampil sebagai blok yang memenuhi lebar container-nya secara horizontal, dan menempatkan elemen berikutnya di bawahnya, bukan berdampingan. Jadi, kalau kamu punya paragraf, heading, atau list, biasanya mereka pakai display block secara default.

Elemen-elemen yang secara default punya display block antara lain:

• sampai

  (judul-judul)

• (paragraf)

• ,
  ,
  1. (daftar)
  2. Kalau kamu mau, elemen yang biasanya inline seperti juga bisa kamu ubah jadi block dengan CSS:

     span {
         display: block;
     }
     

     ---

     Kenapa Display Block Penting?

     Bayangno kamu lagi bikin nasi tumpeng. Nasi tumpeng harus rapi, tiap lapisan harus jelas dan nggak tumpang tindih. Kalau elemen web nggak diatur dengan display block, bisa-bisa tampilannya jadi berantakan, susah dibaca, dan bikin pengunjung web kamu kabur.

     Dengan display block, kamu bisa mengatur layout halaman supaya lebih terstruktur dan mudah dinavigasi. Misalnya, judul artikel tampil jelas di atas, paragraf di bawahnya, lalu gambar dan video menyusul di baris baru. Ini bikin tampilan web kamu jadi rapi dan profesional.

     ---

     Cerita Nyata: Display Block dalam Kehidupan Sehari-hari

     Bayangno kamu lagi di pasar tradisional di Solo. Penjual sayur menata dagangannya di atas meja panjang. Setiap jenis sayur diletakkan di satu tempat yang jelas, tidak bercampur dengan sayur lain. Ini mirip banget sama konsep display block di CSS. Setiap elemen web “diletakkan” dalam blok yang terpisah, supaya pengunjung web bisa dengan mudah menemukan apa yang mereka cari.

     Kalau kamu pernah coba bikin website sederhana, mungkin kamu pernah bingung kenapa tulisan atau gambar kamu jadi numpuk di samping, padahal kamu mau mereka tampil berjajar vertikal. Nah, solusinya gampang: pakai display: block!

     ---

     Tantangan Saat Menggunakan Display Block

     Meski display block terlihat sederhana, ada beberapa hal yang kadang bikin kita pusing:

     • Elemen jadi terlalu lebar: Karena block mengisi lebar penuh container, kadang elemen jadi terlalu besar dan bikin layout jadi kurang fleksibel.
     • Konten jadi terlalu panjang ke bawah: Kalau kamu nggak hati-hati, tampilan bisa jadi terlalu memanjang ke bawah, bikin pengunjung harus scroll terus.
     • Interaksi dengan elemen lain: Kadang kamu pengen elemen tampil berdampingan tapi tetap fleksibel, dan display block nggak bisa langsung ngasih itu.

     Nah, di sinilah kamu mulai belajar properti CSS lain seperti display: inline, inline-block, atau layout modern seperti Flexbox dan Grid.

     ---

     Analoginya: Display Block vs Display Inline

     Kalau display block itu seperti jalan raya yang lebar dan panjang, di mana mobil bisa jalan satu per satu secara berurutan, maka display inline itu seperti trotoar sempit di pinggir jalan, di mana orang bisa berdiri berjejer tapi nggak bisa jalan berbarengan.

     Misalnya, kamu punya beberapa kata di paragraf, mereka biasanya pakai display inline, jadi kata-kata itu berdampingan tanpa memaksa pindah baris. Tapi kalau kamu pakai display block, tiap kata bakal “jalan sendiri” di baris baru, seperti orang yang jalan di jalan raya.

     ---

     Wow Moment #1: Bisa Ubah Elemen Inline Jadi Block!

     Pernah nggak kepikiran kalau elemen seperti yang biasanya cuma buat teks kecil inline, bisa kamu sulap jadi block? Ini seperti sulap, lho! Misalnya kamu mau buat tombol atau label yang tampil penuh di barisnya, tinggal kasih display: block di CSS-nya.

     ---

     Wow Moment #2: Display Block Otomatis Tambah Baris Baru

     Ini yang bikin display block unik. Kamu nggak perlu repot-repot bikin tag atau kasih margin khusus supaya elemen lain pindah ke bawah. Cukup kasih display block, elemen berikutnya otomatis “ngluruk” ke baris baru. Ini seperti orang yang otomatis antri rapi tanpa disuruh.

     ---

     Wow Moment #3: Display Block Bisa Jadi Dasar Layout Web

     Sebelum ada Flexbox atau Grid, display block adalah senjata utama untuk bikin layout web. Dengan memadukan display block dan properti CSS lain seperti margin, padding, dan width, kamu bisa bikin tampilan yang cukup rapi dan mudah dipahami.

     ---

     Bagaimana Cara Menggunakan Display Block?

     Cara pakainya gampang banget. Kamu cukup tulis di file CSS kamu:

     selector {
         display: block;
     }
     

     Misalnya kamu mau bikin semua di halaman jadi block:

     span {
         display: block;
     }
     

     Atau kamu mau bikin tombol