CSS Layout - The display Property

Properti display menentukan apakah / bagaimana elemen ditampilkan. Setiap elemen HTML memiliki nilai tampilan default tergantung pada jenis elemen itu. Tampilan nilai default untuk sebagian besar elemen adalah blok atau inline.

Block-level Elements

Sebuah elemen blok-tingkat selalu dimulai pada baris baru dan mengambil lebar penuh yang tersedia (membentang ke kiri dan kanan sejauh itu bisa).

<Div> elemen adalah elemen blok-tingkat.

Inline Elements

Sebuah elemen inline tidak dimulai pada baris baru dan hanya membutuhkan sebanyak lebar yang diperlukan. Ini adalah inline <span> elemen dalam sebuah paragraf

Display: none;

display: none; umumnya digunakan dengan JavaScript untuk menyembunyikan dan menampilkan elemen tanpa menghapus dan menciptakan mereka. <Script> penggunaan elemen display: none; sebagai default.

Override The Default Display Value

Seperti disebutkan, setiap unsur memiliki nilai tampilan default. Namun, Anda dapat mengganti ini. Mengubah elemen inline untuk elemen blok, atau sebaliknya, dapat berguna untuk membuat halaman terlihat dengan cara tertentu, dan masih mengikuti standar web.

Sebuah contoh umum adalah membuat inline <li> elemen untuk menu horisontal:

li {
    display: inline;
}

Contoh berikut menampilkan <span> elemen sebagai elemen blok:

span {
    display: block;
}

Hide an Element - display:none or visibility:hidden?

Menyembunyikan elemen dapat dilakukan dengan menetapkan properti display none. Elemen akan disembunyikan, dan halaman yang akan ditampilkan sebagai jika elemen tidak ada:

h1.hidden {
    display: none;
}

visibility: hidden; juga menyembunyikan elemen. Namun, elemen masih akan mengambil ruang yang sama seperti sebelumnya. Elemen akan disembunyikan, tapi masih mempengaruhi tata letak:

h1.hidden {
    visibility: hidden;
}