CSS Layout - The display Property

The display Property

The display property specifies if/how an element is displayed.

Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or 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.

Contoh unsur blok-tingkat:

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

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.

Contoh elemen inline:

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

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;
}