Tata Letak CSS - Properti tampilan
Properti displayadalah properti CSS yang paling penting untuk mengontrol tata letak.
Properti tampilan
Properti displaymenentukan jika/bagaimana suatu elemen ditampilkan.
Setiap elemen HTML memiliki nilai tampilan default tergantung pada jenis elemennya. Nilai tampilan default untuk sebagian besar elemen adalah blockatau
inline.
Klik untuk menampilkan panel
This panel contains a <div> element, which is hidden by default (display: none).
It is styled with CSS, and we use JavaScript to show it (change it to (display: block).
Elemen tingkat blok
Elemen level blok selalu dimulai pada baris baru dan mengambil lebar penuh yang tersedia (membentang ke kiri dan kanan sejauh mungkin).
Contoh elemen level blok:
- <div>
- <h1> - <h6>
- <p>
- <bentuk>
- <tajuk>
- <footer>
- <bagian>
Elemen Sebaris
Elemen sebaris tidak dimulai pada baris baru dan hanya membutuhkan lebar sebanyak yang diperlukan.
Ini adalah elemen <span> sebaris di dalam paragraf.
Contoh elemen sebaris:
- <rentang>
- <a>
- <img>
Tampilan: tidak ada;
display: none;biasanya digunakan dengan JavaScript untuk menyembunyikan dan menampilkan elemen tanpa menghapus dan membuatnya kembali. Lihatlah contoh terakhir kami di halaman ini jika Anda ingin tahu bagaimana hal ini dapat dicapai.
Elemen <script>digunakan display: none;
sebagai default.
Ganti Nilai Tampilan Default
Seperti disebutkan, setiap elemen memiliki nilai tampilan default. Namun, Anda dapat menimpa ini.
Mengubah elemen sebaris menjadi elemen blok, atau sebaliknya, dapat berguna untuk membuat halaman terlihat dengan cara tertentu, dan tetap mengikuti standar web.
Contoh umum adalah membuat <li>elemen sebaris untuk menu horizontal:
Contoh
li {
display: inline;
}
Catatan: Menyetel properti tampilan elemen hanya mengubah cara elemen ditampilkan , BUKAN jenis elemennya. Jadi, elemen sebaris dengan display: block;tidak diperbolehkan memiliki elemen blok lain di dalamnya.
Contoh berikut menampilkan elemen <span> sebagai elemen blok:
Contoh
span {
display: block;
}
Contoh berikut menampilkan elemen <a> sebagai elemen blok:
Contoh
a {
display: block;
}
Sembunyikan Elemen - tampilan: tidak ada atau visibilitas: tersembunyi?
display:none
visibility:hidden
Mengatur ulang
Menyembunyikan elemen dapat dilakukan dengan menyetel displayproperti 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;
}
Lebih Banyak Contoh
This example demonstrates display: none; versus visibility: hidden;
This example demonstrates how to use CSS and JavaScript to show an element on
click.
CSS Display/Visibility Properties
| Property | Description |
|---|---|
| display | Specifies how an element should be displayed |
| visibility | Specifies whether or not an element should be visible |