Display CSS: Block, Inline, Inline-Block, None, Flex

Fungsi display

Setiap elemen punya nilai display yang menentukan cara elemen itu ditata. Tiga nilai yang pertama kali kamu temui adalah block, inline, dan inline-block. Berikut tiga kotak yang identik, dengan width, height, padding, dan margin yang sama, hanya display-nya yang berbeda:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>block, inline, inline-block</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.6; }
    .demo { border: 1px dashed #9ca3af; padding: 8px; margin-bottom: 12px; }
    .box {
      width: 120px; height: 40px;
      padding: 6px; margin: 10px;
      background: #bfdbfe; border: 2px solid #2563eb;
    }
    .block { display: block; }
    .inline { display: inline; }
    .inline-block { display: inline-block; }
  </style>
</head>
<body>
  <div class="demo">Text before <span class="box block" id="b">block</span> text after.</div>
  <div class="demo">Text before <span class="box inline" id="i">inline</span> text after.</div>
  <div class="demo">Text before <span class="box inline-block" id="ib">inline-block</span> text after.</div>
</body>
</html>

Di pratinjau, kotak block berada di barisnya sendiri dengan lebar 120px. Kotak inline mengabaikan width dan height dan hanya membungkus katanya, dan padding serta border vertikalnya menyembul di atas dan di bawah baris tanpa membuat barisnya lebih tinggi. Kotak inline-block tetap berada di baris teks tetapi mempertahankan ukuran penuhnya.

display: block

Elemen block mengambil seluruh lebar yang tersedia dan mendorong apa pun yang mengikutinya ke baris baru. Mengubah link menjadi block adalah cara membuat seluruh baris bisa diklik:

.menu a {
  display: block;       /* the full row is the link */
  padding: 10px 16px;
}

Lebar sebuah block bisa diatur, dan margin: 0 auto menengahkannya begitu lebarnya diatur, seperti yang ditunjukkan halaman membuat div di tengah.

display: inline-block

inline-block adalah jalan tengah: elemen mengalir di dalam baris seperti sebuah kata, tetapi ukurannya bisa kamu atur. Ini berguna untuk badge, tombol, dan ikon di dalam teks:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>inline-block badges</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .badge {
      display: inline-block;
      min-width: 24px;
      padding: 2px 8px;
      margin-inline-start: 4px;
      border-radius: 999px;
      background: #dc2626; color: white;
      font-size: 12px; font-weight: 700; text-align: center;
    }
  </style>
</head>
<body>
  <p>Inbox <span class="badge">3</span></p>
  <p>Notifications <span class="badge">12</span></p>
</body>
</html>

Beberapa kotak inline-block dalam satu baris mendapat celah kecil di antaranya dari spasi di HTML. Untuk deretan kotak, display: flex pada induk adalah alat yang lebih baik.

display: none vs visibility: hidden

Keduanya membuat elemen tidak terlihat. Bedanya adalah apakah elemen tetap menyimpan ruangnya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>none vs hidden</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; margin-bottom: 12px; }
    .row div { width: 70px; padding: 12px 0; text-align: center; background: #bbf7d0; border: 2px solid #16a34a; }
    .none { display: none; }
    .hidden { visibility: hidden; }
  </style>
</head>
<body>
  <div class="row"><div>1</div><div>2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="none">2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="hidden">2</div><div>3</div></div>
  <button type="button" id="toggle">Toggle box 2 in the first row</button>
  <script>
    document.getElementById('toggle').addEventListener('click', () => {
      document.querySelector('.row div:nth-child(2)').classList.toggle('none');
    });
  </script>
</body>
</html>

Atribut HTML hidden melakukan hal yang sama dengan display: none lewat stylesheet bawaan browser, artinya aturan CSS apa pun yang mengatur display pada elemen itu (misalnya .card { display: flex; }) akan menimpanya dan elemennya muncul lagi. Tambahkan [hidden] { display: none !important; } jika hal ini merepotkanmu.

Untuk menyembunyikan sesuatu secara visual tetapi tetap tersedia bagi pembaca layar (misalnya label untuk tombol ikon), pakai class "visually hidden" alih-alih display: none.

display: flex dan display: grid

Kedua nilai ini mengubah elemen menjadi wadah tata letak bagi anak-anaknya:

• display: flex menata anak-anak dalam satu baris atau kolom, dengan kendali atas perataan dan jarak. Lihat flexbox.
• display: grid menempatkan anak-anak di baris dan kolom sekaligus.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex and grid</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .item { padding: 10px; background: #fde68a; border: 2px solid #f59e0b; text-align: center; }
    .flex { display: flex; gap: 8px; margin-bottom: 16px; }
    .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  </style>
</head>
<body>
  <div class="flex"><div class="item">flex 1</div><div class="item">flex 2</div><div class="item">flex 3</div></div>
  <div class="grid">
    <div class="item">grid 1</div><div class="item">grid 2</div><div class="item">grid 3</div>
    <div class="item">grid 4</div><div class="item">grid 5</div>
  </div>
</body>
</html>

Wadahnya sendiri tetap berupa block. inline-flex dan inline-grid melakukan hal yang sama untuk anak-anaknya, tetapi membuat wadahnya mengalir secara inline, seperti inline-block.

Nilai-nilai lainnya

Kesalahan umum

• Mengatur width atau height pada span atau a. Elemen inline mengabaikannya. Pakai inline-block atau block.
• Margin vertikal pada elemen inline. Juga diabaikan. Solusinya sama.
• Memakai display: none untuk menyembunyikan teks yang ditujukan bagi pembaca layar. Teksnya jadi tersembunyi dari mereka juga.
• Berharap anak tampil di dalam induk yang display: none. Tidak ada apa pun di dalam induk yang tersembunyi yang ditampilkan.
• Aturan display yang menimpa atribut hidden. Aturan CSS yang menang.
• Mencoba menganimasikan display. Mengatur display: none langsung menyembunyikan elemen, tanpa efek memudar; animasikan opacity lalu ganti display (atau visibility) di akhir.