Display CSS: block, inline, inline-block, flex, grid, dan none

Kalau ada satu property CSS yang diam-diam mengatur seluruh cara halamanmu disusun, itu adalah display. Setiap elemen di sebuah halaman web punya nilai display, mau kamu set sendiri atau tidak. Property inilah yang memutuskan apakah sebuah elemen menumpuk di barisnya sendiri, duduk sejajar dengan teks, hilang sama sekali, atau berubah jadi container tata letak yang bertenaga.

Sebagian dari ini sebenarnya sudah kamu temui sambil lalu — waktu kamu menulis display: flex untuk menata navbar, itu si display sedang bekerja. Sekarang kita pelan-pelan lihat gambaran utuhnya, karena begitu kamu benar-benar paham display, banyak perilaku CSS yang tadinya membingungkan tiba-tiba jadi masuk akal.

Apa sebenarnya yang dilakukan property display

Setiap elemen dirender berdasarkan sebuah tipe box, dan display itulah yang menentukan tipe box tersebut. Ia menjawab dua pertanyaan sekaligus: bagaimana elemen ini mengalir terhadap tetangganya (apakah memakan satu baris penuh, atau duduk sejajar?), dan tata letak macam apa yang ia buat untuk anak-anaknya sendiri?

Nilai bawaannya tergantung elemennya. <div>, <p>, atau <section> lahir sebagai block. Sementara <span>, <a>, atau <strong> lahir sebagai inline. Kamu tidak perlu menyetel apa pun supaya bawaan ini berlaku — browser sudah menanamkannya sejak awal. Property display adalah cara kamu menimpa bawaan itu ketika hasil bawaannya bukan yang kamu inginkan.

.box {
  display: block;
}

Satu baris itu saja bisa mengubah total cara sebuah elemen menempati halaman. Yuk kita bahas satu per satu nilai yang benar-benar bakal kamu pakai.

block: memakan seluruh baris

Elemen block selalu mulai di baris baru dan meregang mengisi seluruh lebar yang tersedia, lalu mendorong apa pun yang datang setelahnya turun ke baris berikutnya. Bayangkan paragraf, heading, dan container <div> — semuanya menumpuk vertikal, satu di atas yang lain.

.card {
  display: block;
  width: 300px;
  height: 100px;
  background: #e0f7ff;
}

Karena elemen block menghormati width dan height, kamu bebas mengatur ukurannya. Mereka juga mematuhi keempat margin dan padding. Inilah box andalan untuk membangun struktur: container, section, kartu, dan baris.

inline: mengalir bersama teks

Elemen inline justru kebalikannya. Ia tidak pindah ke baris baru — ia duduk pas di dalam aliran teks, selebar isinya saja, dan membiarkan elemen inline lain berjejer di sampingnya. Tautan (<a>), <span>, <strong>, dan <em> semuanya inline secara bawaan, dan justru karena itulah kamu bisa menyelipkan sebuah tautan di tengah kalimat tanpa memutus barisnya.

.highlight {
  display: inline;
  background: #fff3b0;
}

Nah, ini jebakan yang sering bikin orang bingung: width dan height diabaikan pada elemen inline. Kamu tidak bisa memberi <span> tinggi tetap dengan menyetel height: 50px — tidak akan ada efeknya. Begitu juga margin atas dan bawah; sama-sama diabaikan. Elemen inline memang dirancang untuk membungkus teks, jadi browser cuma mengizinkanmu mengatur jarak horizontalnya, bukan ukuran vertikalnya.

inline-block: gabungan terbaik keduanya

Bagaimana kalau kamu ingin sebuah elemen duduk sejajar (berdampingan dengan yang lain, mengalir bersama teks) tapi sekaligus bisa menerima width dan height? Untuk itulah inline-block ada. Ia mengalir horizontal seperti elemen inline, tapi di dalamnya berperilaku seperti block — jadi width, height, serta semua margin dan padding bekerja normal.

.tag {
  display: inline-block;
  width: 80px;
  height: 30px;
  padding: 4px 8px;
  background: #00b8e6;
  color: #fff;
}

Ini pas banget untuk hal-hal seperti tag, badge, atau tombol yang harus berjejer dalam satu baris tapi tetap punya ukuran tetap dan padding yang rapi. Sebelum flexbox muncul, inline-block adalah trik andalan untuk menaruh kotak-kotak bersebelahan. Sampai sekarang pun ia masih punya tempat, terutama untuk potongan UI inline yang kecil.

Tabel itu merangkum tiga nilai aliran tradisional. Begitu ketiganya nyantol, nilai-nilai tata letak modern jadi gampang ditambahkan di atasnya.

none: dihilangkan sepenuhnya

Menyetel display: none menghapus sebuah elemen dari halaman sama sekali. Bukan cuma disembunyikan — ia memakan ruang nol, seolah-olah tidak pernah ada di HTML. Tidak ada yang mengalir di sekitarnya, tidak ada ruang yang disisakan untuknya.

.modal {
  display: none;   /* tersembunyi — tidak memakan ruang */
}

.modal.open {
  display: block;  /* tampil saat class "open" ditambahkan */
}

Inilah pola klasik untuk menampilkan dan menyembunyikan hal-hal seperti modal, dropdown, dan menu: berganti-ganti antara display: none dan display: block (biasanya dengan menambah atau menghapus sebuah class lewat JavaScript). Elemennya menghilang dan muncul kembali dengan mulus.

flex dan grid: container tata letak

Dua nilai yang paling sering kamu andalkan untuk tata letak nyata adalah flex dan grid. Menyetel salah satunya pada sebuah elemen bukan cuma mengubah cara elemen itu mengalir — ia menyulap elemen tersebut jadi container bertenaga yang mengatur bagaimana anak-anaknya disusun.

.row {
  display: flex;      /* anak-anak disusun jadi baris atau kolom */
}

.gallery {
  display: grid;      /* anak-anak disusun jadi grid 2 dimensi */
}

display: flex adalah alatmu untuk tata letak satu dimensi — satu baris atau satu kolom item, dengan pengaturan jarak dan perataan yang mudah. display: grid menangani tata letak dua dimensi — baris dan kolom sekaligus, layaknya struktur halaman sungguhan. Keduanya adalah tulang punggung tata letak CSS modern, dan masing-masing layak dibahas mendalam tersendiri.

Kalau kamu ingin cerita lengkapnya, panduan khusus tentang CSS Flexbox dan CSS Grid mengupas setiap property-nya. Untuk sekarang, poin pentingnya adalah flex dan grid itu nilai display — keajaiban tata letaknya mulai begitu kamu menyetel salah satunya pada sebuah container.

Bagaimana display berpadu dengan box model

Ada baiknya kamu ingat bagaimana display terhubung dengan segala hal lain yang sudah kamu pelajari. Apakah width, height, margin, dan padding berlaku atau tidak, semuanya bergantung pada nilai display — box level block memakai box model penuh, sedangkan box inline cuma menghormati sebagiannya. Kalau istilah width, padding, dan margin masih terasa goyah, panduan Box Model CSS layak ditengok lagi sebentar, karena display dan box model bekerja saling bergandengan.

Model berpikirnya begini: display menentukan box jenis apa sebuah elemen, dan box model menentukan bagaimana box itu diukur. Bersama-sama keduanya menjelaskan hampir semua hal tentang mengapa sebuah elemen duduk di tempatnya dan berukuran sebagaimana ukurannya.

Memilih nilai yang tepat

Dalam pekerjaan sehari-hari kamu tidak akan pusing soal ini — beberapa patokan sederhana sudah mencakup sebagian besar kasus:

• Pakai bawaannya untuk hampir semua kasus. <div> sudah block; <span> sudah inline. Jangan diubah kecuali memang perlu.
• Gunakan inline-block saat kamu mau penempatan sejajar plus width atau height tetap — tag, badge, tombol kecil dalam satu baris.
• Pakai flex atau grid pada sebuah container setiap kali kamu menyusun beberapa anak — inilah cara modern membangun tata letak, dan kamu bakal sering memakainya.
• Pakai none untuk menampilkan dan menyembunyikan elemen, biasanya digonta-ganti lewat sebuah class dengan JavaScript.

Itu jujur saja sudah mencakup 95% dari apa yang bakal kamu butuhkan. Nilai display yang lebih eksotis memang ada, tapi bisa kamu pelajari belakangan ketika ada masalah spesifik yang menuntutnya.

Penutup

Property display adalah fondasi tempat segala hal lain dalam tata letak dibangun. Begitu kamu nyaman dengannya, banyak kebingungan CSS yang langsung lenyap:

• Setiap elemen punya nilai display — block dan inline adalah bawaan yang paling umum.
• block memakan satu baris penuh dan menghormati width/height; inline mengalir bersama teks dan mengabaikan width/height.
• inline-block menggabungkan keduanya: penempatan sejajar dengan width dan height yang nyata.
• none menghapus elemen sepenuhnya (ruang nol), cara standar untuk menampilkan/menyembunyikan sesuatu.
• flex dan grid menyulap sebuah elemen jadi container tata letak buat anak-anaknya — jantung dari tata letak CSS modern.

Begitu display nyantol, pertanyaan berikutnya yang wajar muncul adalah soal positioning — bagaimana menggeser sebuah elemen keluar dari aliran normal, menumpuk elemen di atas yang lain, atau menempelkan sesuatu ke pojok layar. Di situlah property seperti position dan z-index berperan, dan itu jadi langkah lanjutan yang pas dari sini.