Display CSS

Properti display adalah properti CSS yang paling penting untuk mengatur layout (tata letak).

Properti Display

Properti display menspesifikasikan bagaimana elemen ditampilkan.

Setiap elemen HTML memiliki nilai tampilan default tergantung pada jenis elemennya. Nilai tampilan default untuk sebagian besar elemen adalah block atau inline.

Elemen Block-level

Elemen block-level selalu dimulai pada baris baru dan mengambil lebar secara penuh yang tersedia (membentang ke kiri dan kanan sejauh mungkin).

Elemen <div> adalah elemen level blok.

Contoh elemen block-level:

• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

Elemen Inline

Elemen inline tidak dimulai pada baris baru dan hanya membutuhkan lebar sebanyak yang diperlukan.

Contoh elemen inline:

• <span>
• <a>
• <img>

Display: none;

display: none; biasanya digunakan dengan JavaScript untuk menyembunyikan dan menampilkan elemen tanpa menghapus dan membuatnya kembali.

Elemen <script> menggunakan display: none; sebagai default.

Mengganti Nilai Display Default

Seperti yang disebutkan sebelumnya, setiap elemen memiliki nilai tampilan default. Namun, Anda dapat menimpanya.

Mengubah elemen inline menjadi elemen blok, atau sebaliknya, dapat berguna untuk membuat halaman terlihat dengan cara spesifik, dan tetap mengikuti standar web.

Contoh umum adalah membuat inline elemen <li> untuk menu horizontal:

li {
  display: inline;
}

Catatan: Mengatur properti display dari elemen hanya mengubah cara elemen ditampilkan, bukan jenis elemennya. Jadi, elemen inline dengan display: block; tidak diperbolehkan memiliki elemen blok lain di dalamnya.

Contoh berikut menampilkan elemen <span> sebagai elemen blok:

span {
  display: block;
}

Contoh berikut menampilkan elemen <a> sebagai elemen blok:

a {
  display: block;
}

Menyembunyikan Elemen - display:none atau visibility:hidden?

Menyembunyikan elemen dapat dilakukan dengan mengatur display properti ke none. Elemen akan disembunyikan, dan halaman akan ditampilkan seolah-olah elemen tersebut tidak ada.

Contoh

h1.hidden {
  display: none;
}

visibility:hidden; juga menyembunyikan elemen.

Namun, elemen tersebut akan tetap menempati ruang yang sama seperti sebelumnya. Elemen akan disembunyikan, tetapi masih memengaruhi tata letak.

Contoh

h1.hidden {
  visibility: hidden;
}

Sumber referensi: w3schools