CSS 06: Memahami Display, Block, Inline, dan Inline-Block

Setiap elemen HTML mempunyai cara tampil bawaan. Judul dan paragraf biasanya memenuhi satu baris, sedangkan tautan dapat berada di tengah kalimat. Perilaku ini diatur oleh property display.

1. Membandingkan Block, Inline, dan Inline-Block

Elemen block memulai baris baru dan dapat diatur ukurannya. Elemen inline mengalir bersama teks; width dan height tidak bekerja seperti pada block. inline-block dapat berjajar sekaligus menerima ukuran dan padding.

2. Menyembunyikan Elemen

Pada contoh, tautan Artikel memakai display: none, sehingga elemen dan ruangnya hilang. Teks tersembunyi di bagian terakhir memakai visibility: hidden, sehingga ruangnya masih dipertahankan.

Menyembunyikan informasi penting dapat membuatnya tidak dapat diakses pengguna. Gunakan kedua nilai tersebut dengan sengaja.

Kesalahan yang Sering Terjadi

• Memberi width pada elemen inline lalu bingung karena ukurannya tidak berubah.
• Menganggap elemen block selalu selebar layar; lebarnya mengikuti ruang induk.
• Menggunakan display: none hanya untuk membuat elemen transparan.
• Memakai display biasa untuk layout kompleks yang lebih cocok memakai Flexbox atau Grid.

Latihan

Tampilkan kembali tautan Artikel, lalu ubah semua tautan menjadi block dan bandingkan susunannya. Ubah visibility: hidden menjadi display: none untuk melihat perbedaan ruang.

Ringkasan

block memulai baris baru, inline mengalir bersama teks, dan inline-block menggabungkan sebagian sifat keduanya. display: none menghilangkan elemen beserta ruangnya.