display adalah properti terpenting CSS untuk mengatur tata letak. Setiap elemen memiliki nilai tampilan default, tergantung pada jenis elemennya. Nilai default untuk sebagian besar elemen biasanya adalah block (blok) atau inline (sebaris). Elemen block sering disebut elemen tingkat blok. Elemen inline selalu hanya disebut elemen inline.
Note: Default = Pengaturan awal
Note: Default = Pengaturan awal
Block
<div>
div adalah elemen blok standar. Elemen tingkat blok dimulai pada baris baru dan membentang dari kiri ke kanan sejauh lebar elemen yang membungkusnya. Elemen tingkat blok yang umum atau biasa digunakan tidak hanya div, namun juga ada p dan form. Untuk HTML5, ada elemen blok baru yakni header, footer, section, dan masih banyak lagi.
</div>
div adalah elemen blok standar. Elemen tingkat blok dimulai pada baris baru dan membentang dari kiri ke kanan sejauh lebar elemen yang membungkusnya. Elemen tingkat blok yang umum atau biasa digunakan tidak hanya div, namun juga ada p dan form. Untuk HTML5, ada elemen blok baru yakni header, footer, section, dan masih banyak lagi.
</div>
Inline
span adalah elemen inline standar. Elemen inline dapat membungkus beberapa teks di dalam paragraf <span> seperti ini </span> tanpa mengganggu aliran paragraf tersebut. Elemen a adalah elemen inline yang paling umum digunakan. Elemen a sendiri digunakan untuk menampilkan tautan (link).
None
Nilai untuk properti display yang ketiga adalah none. Pada beberapa elemen khusus menggunakan nilai ini sebagai default, misalnya script.
Nilai none pada properti display biasa digunakan untuk menyembunyikan atau menampilkan kembali elemen, tanpa benar-benar menghapusnya, dan juga tanpa benar-benar menciptakannya kembali.
Property display yang menggunakan nilai none, berbeda dengan properti visibility yang menggunakan nilai none juga.
Nilai none pada properti display akan membuat tampilan halaman situs web seolah-olah kehilangan elemen tersebut. Padahal, elemen tersebut masih ada.
Dan untuk nilai none pada properti visibility, elemen akan tersembunyi, namun, elemen tersebut akan tetap mengambil ruang yang ditinggalkan. Jadi, seperti meninggalkan ruang kosong yang terkadang membuat tampilan situs web menjadi jelek.
Nilai lain pada Display
Masih ada banyak lagi nilai pada properti display, misalnya list-item dan table. Silahkan kunjungi Mozilla Developers untuk mempelajari properti display lainnya.
Tambahan
Seperti yang sudah saya jelaskan diatas, bahwa setiap elemen memiliki nilai properti display yang berbeda-beda. Namun, semua nilai tersebut bisa kamu ubah sesuai kebutuhan. Misalnya saja, elemen div yang nilai awalnya adalah block, ingin diubah menjadi inline.