Properti display menentukan apakah / bagaimana elemen ditampilkan, dan properti visibilitas menentukan apakah unsur harus terlihat atau tersembunyi.
Menyembunyikan Elemen - display: none atau visibility: hidden
Menyembunyikan elemen dapat dilakukan dengan menetapkan properti display untuk "none" atau properti visibilitas untuk "hidden". Namun, perhatikan bahwa kedua metode ini menghasilkan hasil yang berbeda:
visibility: hidden menyembunyikan elemen, tetapi masih akan mengambil ruang yang sama seperti sebelumnya.Elemen akan disembunyikan, tapi masih mempengaruhi tata letak:
p {
visibility: hidden;
}
display: none menyembunyikan elemen, dan itu tidak akan mengambil ruang apapun. Elemen akan disembunyikan, dan halaman yang akan ditampilkan sebagai elemen tidak ada:
p {
display: none;
}
CSS Display - Blok dan Inline Elements
Sebuah elemen blok merupakan elemen yang mengambil lebar penuh yang tersedia, dan memiliki satu baris sebelum dan setelah.
Contoh unsur blok:
- <H1>
- <P>
- <Li>
- <Div>
Sebuah elemen inline hanya membutuhkan sebanyak lebar yang diperlukan, dan tidak memaksa jeda baris.
Contoh elemen inline:
- <Span>
- <a>
Mengubah Bagaimana sebuah Elemen yang Ditampilkan
Mengubah elemen inline untuk elemen blok, atau sebaliknya, dapat berguna untuk membuat halaman terlihat dengan cara tertentu, dan masih mengikuti standar web.
Contoh berikut menampilkan <li> elemen sebagai elemen inline:
li {
display: inline;
}
Contoh berikut menampilkan <p> elemen sebagai elemen blok:
span {
display: block;
}
0 komentar:
Posting Komentar