Properti display

Nilai display block, inline, inline-block, dan none beserta efeknya pada layout.

Daftar isi

Topik ini menjelaskan properti display, properti yang menentukan peran sebuah elemen di dalam alur normal. Pembahasan mencakup nilai block, inline, inline-block, dan none, perbedaan perilaku inline yang mengabaikan ukuran dengan inline-block yang menghormatinya, serta perbandingan none dengan visibility: hidden. Setelah membacanya, nilai display yang tepat dapat dipilih untuk kasus yang umum dijumpai, seperti tombol, butir daftar, dan elemen berlabel.

Peran properti display#

Properti display menentukan peran luar (outer role) elemen, yaitu cara elemen itu bersikap terhadap elemen-elemen di sekitarnya pada alur normal. Setiap elemen HTML membawa nilai bawaan dari stylesheet browser: div, p, dan section berperan block, sedangkan span, a, dan strong berperan inline. Nilai bawaan ini menjelaskan mengapa dua elemen yang ditulis berurutan dapat bersikap berbeda tanpa satu aturan CSS pun. Properti display tidak mengubah isi elemen, melainkan hanya cara elemen itu diperlakukan saat layout dihitung.

Peran itu dapat diubah tanpa menyentuh HTML. Satu deklarasi display mengubah cara elemen menyusun dirinya, sehingga markup yang sama dapat ditata ulang sepenuhnya dari sisi CSS. Tabel berikut merangkum tiga nilai dasar yang dibahas topik ini:

Perilaku	`block`	`inline`	`inline-block`
Memulai baris baru	Ya	Tidak	Tidak
`width` dan `height` dihormati	Ya	Tidak	Ya
Margin vertikal efektif	Ya	Tidak	Ya
Lebar bawaan	Mengisi ruang tersedia	Mengikuti isi	Mengikuti isi

Nilai none tidak tercantum pada tabel karena perilakunya berbeda kelas: elemen dikeluarkan sama sekali dari layout. Pembahasan none dan alternatifnya diberi bagian tersendiri di bawah. Nilai seperti flex dan grid membentuk model layout tersendiri dan tidak dibahas di sini.

Mengubah peran elemen dengan display#

Contoh klasik perubahan peran adalah butir daftar. Elemen li berperan block secara bawaan karena daftar menuntut satu baris per butir. Apabila kebutuhan berubah, misalnya jadwal piket yang ingin ditampilkan berjajar, peran butirnya cukup diubah tanpa mengganti elemen li:

html Contoh: daftar jadwal piket

<ul class="piket">
  <li>Senin, Ali</li>
  <li>Selasa, Budi</li>
  <li>Rabu, Citra</li>
</ul>

css Contoh: butir piket disusun berjajar

.piket li {
  display: inline;
}

Tanpa aturan CSS, ketiga butir menumpuk di atas satu sama lain lengkap dengan penanda butirnya masing-masing. Setelah display: inline diterapkan, ketiganya mengalir pada satu baris dan dipisahkan oleh spasi biasa. Penanda butir ikut hilang karena penanda tersebut hanya digambar pada elemen yang membentuk blok sendiri. Pola ini sering digunakan untuk baris tautan menu dan kelompok label kecil, dengan jarak antar butir yang kemudian diatur melalui margin horizontal. Kebalikannya juga berlaku: elemen berperan inline dapat dijadikan block, misalnya a yang perlu menempati satu baris penuh pada daftar tautan. Contoh ini menunjukkan bahwa display bekerja pada peran elemen, bukan pada isinya, sehingga struktur daftar untuk data piket tetap utuh secara semantik.

Inline-block: mengalir horizontal dengan ukuran tetap#

Nilai inline-block menggabungkan dua sifat sekaligus. Elemen tetap mengalir secara horizontal dan melipat seperti inline, tetapi width, height, margin vertikal, dan padding vertikalnya dihormati seperti block. Sifat ini menjelaskan mengapa sebagian besar browser menata button sebagai inline-block secara bawaan: tombol harus mengikuti teks di sekitarnya, sedangkan ukuran dan paddingnya tetap dapat ditata.

Kasus yang sama berlaku pada tautan yang diberi gaya tombol:

css Contoh: tautan bergaya tombol

a.tombol {
  display: inline-block;
  padding: 8px 16px;
  background-color: #1d4ed8;
  color: #ffffff;
  border-radius: 6px;
}

Tanpa display: inline-block, tautan mengabaikan padding vertikalnya dan latar biru hanya menyelimuti teks setinggi satu baris. Dengan nilai tersebut, kotak tautan memiliki tinggi yang utuh, tetap berjajar dengan elemen lain di dalam paragraf, dan melipat ke baris berikutnya apabila ruangnya habis. Perbedaan ini paling mudah dilihat pada demo berikut, yang memberi width, height, dan margin vertikal yang sama persis pada elemen dengan nilai display yang berbeda:

Kode sumber demo

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo nilai properti display</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <main>
    <h1>Demo nilai display</h1>

    <h2>display: block</h2>
    <div class="panel">
      <div class="kotak">Kotak satu</div>
      <div class="kotak">Kotak dua</div>
    </div>

    <h2>display: inline</h2>
    <div class="panel">
      <span class="bidang">Susu</span>
      <span class="bidang">Telur</span>
      <span class="bidang">Beras</span>
    </div>

    <h2>display: inline-block</h2>
    <div class="panel">
      <span class="bidang inline-block">Susu</span>
      <span class="bidang inline-block">Telur</span>
      <span class="bidang inline-block">Beras</span>
    </div>

    <h2>display: none</h2>
    <div class="panel">
      <span class="bidang inline-block">Kotak terlihat</span>
      <span class="bidang inline-block hilang">Kotak tersembunyi</span>
      <span class="ket">Ruang kotak tersembunyi tidak ada sama sekali.</span>
    </div>
  </main>

<style>
/* Gaya demo nilai properti display */
body {
  font-family: sans-serif;
  background-color: #eef2f7;
  color: #1f2937;
  margin: 0;
  padding: 16px;
}

h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 14px 0 8px; }

.panel {
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 12px;
}

.kotak {
  background-color: #bfdbfe;
  border: 1px solid #93c5fd;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 8px;
}

/* width, height, dan margin vertikal sama untuk kedua baris di bawah */
.bidang {
  display: inline;
  width: 110px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  background-color: #bfdbfe;
  border: 1px solid #93c5fd;
  border-radius: 6px;
  margin: 10px 8px;
}

.inline-block {
  display: inline-block;
}

.hilang {
  display: none;
}

.ket {
  color: #64748b;
  font-size: 13px;
}

</style>
<style>
/* Gaya demo nilai properti display */
body {
  font-family: sans-serif;
  background-color: #eef2f7;
  color: #1f2937;
  margin: 0;
  padding: 16px;
}

h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 14px 0 8px; }

.panel {
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 12px;
}

.kotak {
  background-color: #bfdbfe;
  border: 1px solid #93c5fd;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 8px;
}

/* width, height, dan margin vertikal sama untuk kedua baris di bawah */
.bidang {
  display: inline;
  width: 110px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  background-color: #bfdbfe;
  border: 1px solid #93c5fd;
  border-radius: 6px;
  margin: 10px 8px;
}

.inline-block {
  display: inline-block;
}

.hilang {
  display: none;
}

.ket {
  color: #64748b;
  font-size: 13px;
}

</style></body>
</html>

Panel inline memperlihatkan tiga kata daftar belanja yang tinggi dan lebarnya diabaikan, sedangkan panel inline-block memperlihatkan tiga kotak berukuran penuh yang tetap berjajar. Panel none menunjukkan satu kotak yang ruangnya lenyap tanpa sisa. Perbedaan ketiganya hanya terletak pada satu deklarasi display, sehingga nilai lain pada panel yang sama dapat diuji dengan menyunting berkas index.css.

Menyembunyikan elemen: none dan visibility#

Nilai display: none mengeluarkan elemen sama sekali dari layout. Elemen tersebut tidak membentuk kotak, tidak menempati ruang, dan tidak muncul pada urutan fokus keyboard. Perilaku ini berbeda dengan visibility: hidden, yang menyembunyikan kotak tanpa membebaskan ruangnya: elemen tetap memengaruhi layout, tetapi tidak terlihat dan tidak dapat menerima peristiwa pointer.

Pemilihan di antara keduanya mengikuti kebutuhan. display: none cocok untuk konten yang tidak relevan pada keadaan tertentu, misalnya baris tabel jadwal yang disembunyikan sampai tombol penyaring ditekan. visibility: hidden cocok untuk menyembunyikan sementara tanpa menggeser layout, misalnya menjaga tinggi sebuah panel agar tidak melompat saat isinya ditukar. Keduanya tetap menyembunyikan isi dari pembaca layar (screen reader), sehingga elemen yang disembunyikan tidak boleh menjadi satu-satunya jalan menuju informasi penting.

Kesalahan umum#

Kesalahan pertama adalah memberikan width, height, atau margin vertikal pada elemen inline lalu bertanya-tanya mengapa tidak berefek. Perilaku itu memang sesuai spesifikasi, karena elemen inline tidak membentuk kotak dengan ukuran tetap. Perbaikannya, ubah nilai display-nya menjadi inline-block apabila ukuran tetap dan aliran horizontal sama-sama dibutuhkan.

Kesalahan kedua adalah menganggap display: none sama dengan visibility: hidden. Penggunaan visibility: hidden pada elemen yang seharusnya dikeluarkan membuat halaman memiliki ruang kosong yang sulit dijelaskan. Perbaikannya, tentukan dahulu apakah ruang elemen perlu dipertahankan, lalu pilih nilainya. Gejala ruang kosong semacam ini mudah disalahartikan sebagai bug layout, padahal penyebabnya satu deklarasi.

Kesalahan ketiga adalah menata elemen label formulir sebagai inline, sehingga teks label dan input menempel pada satu baris panjang yang sulit dibaca. Perbaikannya, beri display: block pada label agar input turun ke baris baru, lalu kendalikan jaraknya dengan margin. Pola label di atas input juga membuat formulir lebih mudah dibaca pada layar sempit.

Ringkasan#

Properti display menentukan peran elemen pada alur normal, sedangkan nilai bawaannya berasal dari stylesheet browser.
Elemen block menempati baris sendiri dan mengisi lebar tersedia, sedangkan elemen inline mengalir dalam teks dan mengabaikan width, height, serta margin vertikal.
inline-block mengalir horizontal seperti inline tetapi menghormati ukuran, sehingga cocok untuk tombol dan kotak kecil yang berjajar.
display: none mengeluarkan elemen dari layout beserta ruangnya, sedangkan visibility: hidden menyembunyikan kotak tanpa membebaskan ruang.

Referensi#

display — MDN — Rujukan resmi properti display beserta seluruh nilainya.
visibility — MDN — Rujukan resmi properti visibility dan perbandingannya dengan display.
Learn CSS — web.dev — Kursus resmi tim Google Chrome yang membahas rendering dan layout dasar.