CSS Display

Properti display menentukan apakah / bagaimana elemen ditampilkan, dan properti visibilitas menentukan apakah suatu elemen harus terlihat atau tersembunyi.



Menyembunyikan sebuah Elemen - display: none atau visibility: hidden 

Menyembunyikan elemen dapat dilakukan dengan menyetel properti display ke "none" atau properti visibility 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. Unsur akan disembunyikan, tetapi masih mempengaruhi tata letak.


h1.hidden {visibility:hidden;}


display: none menyembunyikan elemen, dan tidak akan mengambil ruang apapun. Unsur akan disembunyikan, dan halaman yang akan ditampilkan sebagai elemen yang tidak ada:


h1.hidden {display:none;}

CSS Display - Block dan Inline Elements 

Sebuah elemen blok merupakan elemen yang mengambil lebar secara penuh dari space yang tersedia, dan memiliki satu baris sebelum dan setelah. Contoh elemen blok: 
  • <h1> 
  • <p> 
  • <div>

Sebuah elemen inline hanya membutuhkan sebanyak lebar yang diperlukan, dan tidak memaksa jeda baris. Contoh elemen inline: 
  • <span> 
  • <a> 


Mengubah 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 daftar item sebagai elemen inline:

li {display:inline;}

Contoh berikut menampilkan span elemen sebagai elemen blok:

span {display:block;}

Catatan: Mengubah jenis tampilan dari elemen hanya dilihat dari bagaimana elemen ditampilkan, bukan pada jenis elemen itu. Sebagai contoh: Sebuah elemen inline diatur ke display: block tidak diperbolehkan untuk memiliki elemen blok bersarang di dalamnya.
 
Bagikan halaman ke sosial media
 
 
 

   Komentar Anda