Block dan Inline

Setiap elemen HTML lahir dengan salah satu dari dua tipe kotak: block atau inline. Tipe ini menentukan perilaku yang sangat berbeda ketika kita mengatur lebar, tinggi, margin, dan padding, serta cara elemen menempati baris di dalam alur dokumen. Banyak kebingungan pemula — misalnya “mengapa width pada span tidak berdampak” — berakar pada tipe kotak yang tidak disadari. Pada Chapter ini kita membedah kedua tipe tersebut, lalu menunjukkan cara mengubah tipe kotak dengan properti display.

Perilaku Elemen Block #

Elemen block menguasai seluruh barisnya. Browser menyusun kotak block secara vertikal, satu setelah yang lain, dan setiap kotak memulai baris baru. Ketika lebar tidak dinyatakan (width: auto), kotak block meregang untuk memenuhi lebar wadahnya. Anggota bawaannya antara lain div, p, h1–h6, ul, ol, li, section, dan article.

Karena kotak block “memiliki” barisnya sendiri, semua alat ukur box model berlaku penuh: width, height, margin pada keempat sisi, serta padding pada keempat sisi. Detail ukurannya telah kita bahas pada Course box model; di sini yang penting diingat adalah bahwa tipe block tidak pernah menolak properti ukuran.

Perilaku Elemen Inline #

Elemen inline hidup di dalam baris teks. Kotaknya selebar isi teksnya saja, dan beberapa elemen inline dapat berbagi satu baris yang sama. Anggota bawaannya antara lain span, strong, em, a, dan code. Tipe inline memiliki aturan yang jauh lebih membatasi:

• width dan height diabaikan — tinggi baris ditentukan oleh line-height, bukan oleh properti ukuran.
• margin-top dan margin-bottom tidak berlaku; margin-left dan margin-right tetap berlaku.
• padding horizontal berlaku; padding vertikal tidak mendorong baris — latar padding dapat menumpuk di atas baris lain secara visual.
• Elemen inline memindah baris secara wajar, bahkan dapat terpotong di perbatasan dua baris.

Aturan ini bukan cacat, melainkan konsekuensi desain: baris teks harus tetap mengalir rapi, sehingga properti yang berpotensi memecah baris sengaja tidak diberlakukan pada kotak inline.

Mengubah Tipe Kotak dengan display #

Properti display menentukan tipe kotak, dan kita bebas mengubahnya. Contoh berikut memaksa sebuah span menjadi block:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <style>
    * { box-sizing: border-box; margin: 0; }
    .arena { width: 600px; padding: 16px; outline: 2px solid rgb(148, 163, 184); }
    #span-inline {
      display: inline;
      width: 300px; height: 80px; margin-top: 40px;
      background: rgb(254, 215, 170);
    }
    #span-block {
      display: block;
      width: 300px; height: 80px; margin-top: 16px;
      background: rgb(191, 219, 254);
    }
    #p-tengah {
      width: 300px; margin: 16px auto;
      background: rgb(220, 252, 231); text-align: center;
    }
  </style>
</head>
<body>
  <div class="arena">
    <p>Span pertama
      <span id="span-inline">dideklarasikan 300&times;80px</span>
      namun tetap inline.</p>
    <span id="span-block">Span kedua diubah menjadi block 300&times;80px</span>
    <p id="p-tengah">Paragraf block selebar 300px, dipusatkan margin auto</p>
  </div>
</body>
</html>

Hasil di Browser:

Span pertama tetap mengikuti teks: deklarasi width 300px, height 80px,
dan margin-top 40px tidak berdampak pada layout (computed display: inline).
Span kedua tampil sebagai kotak penuh: computed display block dengan
width 300px dan height 80px, dimulai pada baris sendiri.
Paragraf hijau selebar 300px (computed width: 300px) tampil di tengah
arena berkat margin auto.

Mari kita telaah deklarasi yang menentukan:

1. Baris 7 (#span-inline { display: inline; ... }): span memang inline secara bawaan; deklarasi ini menegaskan bahwa width, height, dan margin-top pada baris berikutnya hanya akan dilaporkan di DevTools, tanpa memengaruhi layout.
2. Baris 13 (#span-block { display: block; ... }): perubahan tipe dari inline ke block membuat semua properti ukuran mendadak berlaku — span kini menjadi kotak 300×80px yang memulai baris sendiri.
3. Baris 19 (#p-tengah { width: 300px; margin: 16px auto; }): paragraf diberi lebar tetap 300px, lalu nilai auto pada margin kiri-kanan membagi sisa ruang secara seimbang sehingga kotak terpusat — pola klasik untuk konten block selebar tetap.

Tabel Ringkas Perilaku Kedua Tipe #

Dokumentasi resmi properti ini dapat Anda baca pada MDN: display . Ada satu pengecualian menarik pada aturan inline di atas: elemen seperti img bernilai inline bawaan tetapi menerima width dan height — pembahasan lengkapnya menunggu Anda di Chapter Replaced Elements .