Display CSS Adalah: Perbedaan Block, Inline, Inline-Block, Flex, dan Grid

Display CSS adalah properti yang menentukan bagaimana sebuah elemen HTML ditampilkan dan bagaimana ia menyusun diri terhadap elemen di sekitarnya. Dengan kata lain, display mengatur “tipe kotak” sebuah elemen: apakah ia memakan satu baris penuh, mengalir menyamping berdampingan dengan elemen lain, menjadi wadah yang mengatur anak-anaknya, atau bahkan hilang sama sekali dari halaman. Nyaris setiap keputusan tata letak (layout) di CSS berakar dari properti satu ini.

Masalahnya, pemula sering hafal nama-nilainya tapi bingung kapan dan kenapa memilih yang mana, kenapa <div> selalu turun ke baris baru, kenapa <span> menolak diberi width, atau kenapa tombol dari tag <a> butuh display: inline-block. Artikel ini membedah keenam nilai display yang paling sering kamu pakai, block, inline, inline-block, none, flex, dan grid, lengkap dengan contoh kode, perbandingan langsung, dan playground interaktif supaya intuisinya benar-benar terbentuk.

Display CSS Adalah… (Pengertian dan Fungsinya)

Display adalah properti CSS yang menetapkan jenis kotak rendering sebuah elemen, apakah ia berperilaku sebagai block, inline, atau sebagai container layout seperti flex dan grid. Setiap elemen HTML punya nilai display bawaan: <div>, <p>, dan <h1> secara default adalah block; sementara <span>, <a>, dan <strong> secara default adalah inline. Properti display memungkinkan kamu menimpa perilaku bawaan itu sesuai kebutuhan layout.

Sintaksnya sesederhana ini:

.elemen {
  display: block;        /* atau inline, inline-block, flex, grid, none */
}

Nilai yang kamu tulis menentukan dua hal sekaligus: bagaimana elemen itu sendiri berperilaku (memakan baris penuh atau tidak, menghormati width/height atau tidak) dan bagaimana anak-anaknya diatur (khusus untuk flex dan grid). Perbedaan inilah yang bikin banyak pemula tersandung, jadi kita bahas satu per satu.

Perbedaan Block, Inline, dan Inline-Block

Perbedaan intinya: block memakan satu baris penuh dan menghormati width/height; inline mengalir menyamping tapi mengabaikan width/height; sedangkan inline-block menggabungkan keduanya, mengalir menyamping dan menghormati width/height. Tiga nilai ini adalah fondasi layout CSS klasik, dan memahami bedanya menyelesaikan mayoritas kebingungan pemula soal “kenapa elemen saya begini”.

Mari lihat perbandingannya dalam tabel:

Perhatikan baris kedua tabel, inilah sumber frustrasi paling umum. Kamu memberi <span> sebuah width: 200px, tapi tidak terjadi apa-apa. Itu bukan bug: elemen inline memang dirancang mengabaikan width dan height, karena ukurannya ditentukan oleh isinya, bukan olehmu.

<span class="salah">Coba beri width</span>
<div class="benar">Div menghormati width</div>

.salah {
  width: 300px;   /* diabaikan! span itu inline */
  background: #fde047;
}
.benar {
  width: 300px;   /* dihormati, div itu block */
  background: #bbf7d0;
}

Kalau kamu butuh sebuah elemen yang mengalir menyamping (seperti inline) tapi bisa diberi width, height, dan padding vertikal (seperti block), jawabannya adalah inline-block. Inilah alasan hampir semua tombol berbasis tag <a> diberi display: inline-block:

.tombol {
  display: inline-block;  /* mengalir menyamping + padding vertikal jalan */
  padding: 12px 24px;
  background: #3b82f6;
  color: white;
  border-radius: 8px;
}

Tanpa inline-block, padding: 12px 24px di atas hanya bekerja setengah, padding kiri-kanan jalan, tapi padding atas-bawah menimpa baris lain tanpa mendorong layout. Perbedaan perilaku inline vs block ini kami kupas lebih dalam di artikel inline adalah.

Display None: Menyembunyikan Elemen Sepenuhnya

display: none membuat elemen hilang total dari halaman, ia tidak dirender, tidak memakan ruang, dan seolah-olah tidak pernah ada di HTML. Ini berbeda dari visibility: hidden yang menyembunyikan elemen tapi tetap menyisakan ruang kosongnya. display: none sangat umum dipakai untuk menu dropdown, modal, tab, dan elemen apa pun yang perlu muncul-hilang lewat JavaScript.

.menu {
  display: none;   /* tersembunyi, tidak memakan ruang sama sekali */
}
.menu.aktif {
  display: block;  /* muncul saat class "aktif" ditambahkan JS */
}

Bandingkan dengan visibility: hidden:

.a { display: none; }        /* hilang + ruangnya juga hilang */
.b { visibility: hidden; }   /* tak terlihat, tapi ruang kosongnya tetap ada */

Perbedaan halus ini penting: kalau kamu menyembunyikan sesuatu dengan display: none lalu heran kenapa ada “lompatan” tata letak saat elemen muncul kembali, itu karena ruangnya memang benar-benar tidak dipesan sebelumnya. Untuk aksesibilitas, ingat juga bahwa elemen display: none tidak dibacakan oleh screen reader.

Display Flex dan Grid: Dua Sistem Layout Modern

display: flex dan display: grid mengubah sebuah elemen menjadi container yang secara otomatis mengatur posisi anak-anaknya, flex menyusun dalam satu dimensi (baris atau kolom), sedangkan grid menyusun dalam dua dimensi (baris dan kolom sekaligus). Berbeda dari block dan inline yang mengatur elemen itu sendiri, flex dan grid mengatur anak-anak langsung dari elemen tempat properti itu dipasang.

Contoh flex, menyusun tiga kartu berdampingan dengan jarak rata:

.container {
  display: flex;
  gap: 16px;              /* jarak antar anak */
  justify-content: space-between;
}

<div class="container">
  <div class="kartu">1</div>
  <div class="kartu">2</div>
  <div class="kartu">3</div>
</div>

Ketiga .kartu di atas otomatis berbaris menyamping, padahal <div> secara default block (yang normalnya menumpuk ke bawah). Ini terjadi karena begitu parent-nya display: flex, aturan main anak-anaknya diambil alih oleh flexbox.

Sementara grid cocok untuk layout dua dimensi seperti galeri atau dashboard:

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

flex dan grid adalah topik besar yang punya banyak properti turunan (justify-content, align-items, flex-direction, dan lain-lain). Kalau kamu ingin mendalaminya, mulai dari panduan Flexbox kami, lalu lanjut ke panduan CSS Grid. Untuk latihan langsung dengan editor di browser, ada lesson display di Hyper Sheets yang membahas tiap nilai display satu per satu.

Coba Sendiri: Bandingkan Semua Nilai Display

Cara tercepat memahami display adalah melihat elemen yang sama berubah perilaku saat nilainya diganti. Playground di bawah punya tiga kotak identik, pilih nilai display yang berbeda dan perhatikan bagaimana ketiganya menyusun ulang diri. Perhatikan khususnya saat memilih inline: width dan height langsung di-abu-abukan karena elemen inline mengabaikan keduanya.

.kotak {
  display: block;
  width: 90px;
  height: 60px;
}

Coba urutan ini untuk membangun intuisi: mulai dari block (tiga kotak menumpuk ke bawah), lalu inline (menyamping tapi ukuran mengecil ikut isi), lalu inline-block (menyamping dan ukuran kembali normal). Setelah itu bandingkan flex dan grid yang menyusun rapi berdampingan, dan terakhir none yang membuat semuanya lenyap. Begitu pola ini terasa, kamu sudah pegang 90% dari apa yang perlu diketahui soal display.

Mengubah Display Bawaan Sebuah Elemen

Kamu bisa menimpa display bawaan tag apa pun, mengubah <div> (block) menjadi inline, atau <span> (inline) menjadi block, dan browser akan menuruti nilai CSS-mu, bukan default HTML-nya. Ini teknik sehari-hari yang membebaskanmu dari batasan perilaku bawaan tag.

/* Membuat daftar link menu berbaris menyamping */
nav a {
  display: inline-block;
  padding: 8px 16px;
}

/* Membuat span jadi block agar turun ke baris sendiri */
.label {
  display: block;
  margin-bottom: 4px;
}

Meski begitu, ada prinsip penting: pilih tag HTML berdasarkan makna (semantik), lalu atur tampilannya dengan display. Jangan memilih <div> hanya karena “kebetulan block” kalau yang kamu butuhkan sebenarnya sebuah paragraf atau daftar. Tag yang benar secara semantik membuat HTML-mu lebih mudah dibaca mesin pencari dan screen reader, soal tata letaknya, itu tugas CSS. Kalau dasar-dasar struktur HTML masih terasa asing, ada baiknya mampir dulu ke panduan HTML untuk pemula.

FAQ Seputar Display CSS

Display CSS artinya apa?

Display adalah properti CSS yang menentukan bagaimana sebuah elemen ditampilkan dan menyusun diri di halaman. Nilainya menentukan apakah elemen memakan satu baris penuh (block), mengalir menyamping (inline), atau menjadi container yang mengatur anak-anaknya (flex, grid). Setiap tag HTML punya nilai display bawaan yang bisa kamu timpa lewat CSS.

Apa perbedaan block, inline, dan inline-block?

block memakan satu baris penuh dan menghormati width/height. inline mengalir menyamping tapi mengabaikan width/height, ukurannya mengikuti isi. inline-block menggabungkan keduanya: mengalir menyamping seperti inline, tapi tetap menghormati width/height seperti block. Untuk tombol dari tag <a>, inline-block adalah pilihan umum.

Kenapa width tidak berpengaruh pada elemen saya?

Kemungkinan besar elemenmu bersifat inline (misalnya <span>, <a>, atau <strong>). Elemen inline mengabaikan width dan height secara desain. Solusinya: ubah ke display: inline-block (kalau ingin tetap menyamping) atau display: block (kalau boleh turun ke baris sendiri).

Apa beda display: none dan visibility: hidden?

display: none membuat elemen hilang total, tidak dirender dan tidak memakan ruang, seolah tidak ada di HTML. visibility: hidden menyembunyikan elemen secara visual tapi tetap menyisakan ruang kosongnya di layout. Untuk menu atau modal yang perlu benar-benar lenyap saat tersembunyi, pakai display: none.

Kapan pakai flex dan kapan pakai grid?

Pakai flex untuk menyusun elemen dalam satu dimensi, satu baris atau satu kolom (misalnya navbar, deretan tombol, daftar kartu). Pakai grid untuk layout dua dimensi, baris dan kolom sekaligus (misalnya galeri foto, dashboard, tata letak halaman). Keduanya sering dipakai bersama dalam satu proyek sesuai kebutuhan.

Apakah display bisa mengubah tag HTML apa pun?

Ya. Kamu bisa mengubah <div> (default block) jadi inline, atau <span> (default inline) jadi block, dan browser akan menuruti CSS-mu. Tapi tetap pilih tag berdasarkan makna semantiknya dulu, lalu atur tampilannya lewat display, jangan memilih tag hanya karena perilaku display bawaannya.

Langkah Selanjutnya

Sekarang kamu sudah pegang peta lengkapnya: block memakan baris penuh, inline mengalir menyamping tanpa ukuran, inline-block menggabungkan keduanya, none menyembunyikan total, sedangkan flex dan grid mengubah elemen jadi container pengatur layout. Keenam nilai ini adalah fondasi dari hampir semua tata letak yang akan kamu buat.

Langkah paling efektif berikutnya adalah latihan langsung. Mulai dari lesson display di Hyper Sheets untuk memantapkan tiap nilai, lalu dalami dua sistem layout modern lewat panduan Flexbox dan panduan CSS Grid. Sambil belajar, pahami juga bagaimana display berhubungan dengan ruang di dalam elemen di artikel padding adalah. Selamat ngoding!