Tutorial CSS / display CSS: block, inline, inline-block, dan Menyembunyikan Elemen

Properti display menentukan bagaimana sebuah elemen membuat kotak dan berpartisipasi dalam tata letak. Block, inline, dan inline-block berperilaku berbeda dalam aliran normal; display: none menghapus kotak, sementara visibility: hidden meninggalkan ruang tata letaknya.

Bandingkan block, inline, dan inline-block

div·p biasanya ditampilkan sebagai blok, dan span·a biasanya ditampilkan secara inline. Jika Anda tidak memberikan lebar terpisah untuk sebuah blok, biasanya blok tersebut akan mengisi lebar yang tersedia dari elemen induknya. Inline ditempatkan di dalam satu baris seperti huruf-huruf dalam sebuah kalimat, memungkinkan konten panjang untuk dibagi ke beberapa baris. Inline-block diperlakukan sebagai satu kotak yang ditempatkan di dalam satu baris, sehingga meskipun konten di dalam kotak dibungkus, kotak itu sendiri tidak terbagi menjadi beberapa bagian seperti inline biasa.

.item { width: 120px; height: 48px; padding: 8px; margin: 8px; }
.blocks .item { display: block; }
.inlines .item { display: inline; }
.inline-blocks .item { display: inline-block; }

Seluruh contoh memberikan ukuran dan margin yang sama pada tiga span yang sama dan hanya mengubah nilai display. block menulis baris baru untuk setiap item, sedangkan inline-block menempatkannya pada baris yang sama jika ada ruang. Deklarasi width·height dari inline tidak mengubah ukuran kotak aktual dari span teks biasa menjadi angka tersebut, meskipun tetap ada dalam daftar style. Periksa deklarasi yang dihitung dan ukuran yang sebenarnya digunakan secara terpisah.

Pahami spasi inline dan elemen tergantikan

Dalam inline biasa, margin kiri dan kanan serta padding memengaruhi ruang di dalam baris. Padding dan border atas dan bawah dapat digambar, tetapi tidak menentukan tinggi baris dengan mendorong baris di sekitarnya seperti blok. Jika Anda memberikan padding vertikal besar pada teks multi-baris, mungkin akan terlihat tumpang tindih. Sepanjang contoh, kita mengamati tampilan dengan memberikan sedikit kelonggaran pada tinggi baris.

Jangan menerapkan “ukuran elemen inline tidak bisa ditetapkan” pada setiap elemen. Elemen tergantikan (replaced element), seperti img, menampilkan konten eksternal dan dapat menggunakan lebar dan tinggi bahkan ketika tampilan default mereka adalah inline. Persegi panjang biru dalam contoh adalah 120 × 60px. Perlakukan berbeda dari span teks biasa. Panduan MDN tentang layout blok dan inline menjelaskan aliran dasar.

Bandingkan display: none dan visibility: hidden

DOM (Document Object Model) adalah model di mana browser memperlakukan dokumen HTML sebagai struktur elemen. Menyembunyikan dengan CSS berbeda dengan menghapus elemen HTML. Paragraf dengan display: none juga dapat ditemukan di panel Elements pada alat pengembang. Dalam baris “Front, target, Back” (depan, target, belakang) dari seluruh contoh, hidden meninggalkan ruang kosong di posisi target, dan none berarti huruf-huruf di belakangnya dibawa ke depan.

Menyembunyikan elemen dapat mengubah akses keyboard dan ketersediaannya untuk teknologi asistif serta tampilannya. Latihan ini membandingkan ruang kotak di dokumen statis. Untuk menu dan kontrol yang nyata, periksa juga pengelolaan fokus dan apakah informasi yang diperlukan tetap tersedia. Lihat MDN: display, MDN: visibility.

Menyusun kotak inline-block dalam aliran normal

Karena inline-block berada di dalam garis teks, secara default ia disusun sejajar dengan garis dasar garis tersebut. Jika Anda melihat ruang kosong di bawah suatu item atau item dengan tinggi yang berbeda tidak sejajar, periksa properti vertical-align dan line-height secara bersamaan. Bahkan spasi atau pemecahan baris di antara item dalam HTML dapat menjadi celah yang terlihat dalam penempatan inline.

Bahkan jika Anda mengubah tampilan dengan display, perubahan tersebut tidak memberikan semantik judul (heading) pada span atau fungsi tombol pada div. Pilih HTML yang sesuai dengan maksud Anda dan atur penempatannya. Jika Anda perlu mengatur penjajaran, jarak, dan ukuran beberapa kotak sekaligus, aturan yang Anda pelajari nanti dalam Flexbox·Grid mungkin lebih tepat. Setelah Anda memahami alur dasar, menjadi lebih mudah untuk menentukan perubahan tata letak. Cara menempatkan item sepanjang satu sumbu dibahas dengan contoh lengkap di Dasar Flexbox: Kontainer, Item, dan Sumbu. Cara merancang baris dan kolom bersama-sama dibahas dengan contoh lengkap di Dasar CSS Grid: Track, Garis, dan Penempatan Item.

Jalankan contohnya dan ubah satu nilai pada satu waktu

Simpan kode di bawah ini sebagai UTF-8 di display.html dan buka. Contoh gambar berisi data SVG yang dapat ditampilkan tanpa berkas gambar terpisah. Bandingkan tiga metode penempatan dan tiga kondisi tampilan kotak dalam dokumen yang sama.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparison of display and hiding</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 16px; color: #333; font: 16px/1.6 sans-serif; }
    .example { margin-block: 24px; padding: 8px; border: 1px dashed #777; }
    .item { width: 120px; height: 48px; padding: 8px; margin: 8px;
      border: 1px solid #a8653e; background: #ffe8dd; }
    .blocks .item { display: block; }
    .inlines { line-height: 3; }
    .inlines .item { display: inline; }
    .inline-blocks .item { display: inline-block; }
    .visibility-row { margin-block: 16px; padding: 8px; border: 1px solid #aaa; }
    .target { display: inline-block; width: 120px; height: 48px; background: #d9eee2; }
    .none .target { display: none; }
    .hidden .target { visibility: hidden; }
    .replaced { width: 120px; height: 60px; vertical-align: middle; }
  </style>
</head>
<body>
  <h1>Comparing block and inline elements</h1>
  <h2>block</h2><div class="example blocks"><span class="item">Item A</span><span class="item">Item B</span><span class="item">Item C</span></div>
  <h2>inline</h2><div class="example inlines"><span class="item">Item A</span><span class="item">Item B</span><span class="item">Item C</span></div>
  <h2>inline-block</h2><div class="example inline-blocks"><span class="item">Item A</span><span class="item">Item B</span><span class="item">Item C</span></div>
  <h2>Comparing visible, hidden, and removed boxes</h2>
  <div class="visibility-row">Front <span class="target">Visible target</span> Back</div>
  <div class="visibility-row hidden">Front <span class="target">Hidden target</span> Back</div>
  <div class="visibility-row none">Front <span class="target">Target with no box</span> Back</div>
  <h2>An image as an inline replaced element</h2>
  <p>Front <img class="replaced" alt="A blue rectangle 120px wide and 60px tall." src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Crect width='48' height='24' fill='%237ebad3'/%3E%3C/svg%3E"> Back</p>
</body>
</html>

1. Di Developer Tools, periksa ukuran item block dan inline-block hingga batasnya. Itu adalah 120×48px karena aturan border-box yang umum. Item inline tidak dikunci ke lebar 120px meskipun memiliki deklarasi lebar yang sama.
2. Persempit jendela untuk melihat apakah item ketiga pada inline-block membungkus ke baris berikutnya. Setiap block dimulai pada baris baru, bahkan pada layar lebar.
3. Nonaktifkan deklarasi display: none pada aturan .none .target. Periksa apakah posisi huruf di belakangnya berubah saat target muncul. Jika Anda mematikan deklarasi visibility: hidden, objek akan muncul, tetapi ruang yang awalnya disediakan akan tetap dipertahankan.
4. Ubah hanya lebar gambar menjadi 160px. Tidak seperti span inline biasa, periksa apakah ukuran kotak gambar berubah, lalu kembalikan ke 120px. Jika Anda tetap menjaga tinggi 60px tetap dan hanya mengubah lebar, rasio kotak gambar akan berubah.

Jika penempatan berbeda dari yang diharapkan, periksa nilai display akhir, metode penempatan induk, ukuran kotak, dan tinggi garis. Daripada menambahkan berulang kali deklarasi ukuran yang tidak berlaku, akan lebih membantu jika pertama membedakan antara tipe elemen dan aliran dasar.