Display dan Visibility dalam CSS

Menyembunyikan sebuah elemen

Menyembunyikan sebuah elemen dapat dilakukan dengan display:none; atau visibility:hidden;. Namun kedua properti itu menghasilkan hasil yang berbeda :

visibility:hidden; menyembunyikan elemen, tetapi masih akan mengambil ruang dari tempat sembunyinya, dan masih mempengaruhi tata letak.

Contoh :

h1{
visibility:hidden;
}

display:none; menyembunyikan elemen, dan tidak akan mengambil ruang apapun.

Contoh :

h1{
display:none;
}

---

display:block; dan display:inline;

Sebuah elemen block adalah elemen yang mengambil lebar penuh yang tersedia.

Contoh :

p{
background:yellow;
display:block;
}

Jadinya

Sebuah elemen inline hanya mengambil lebar yang diperlukan.

Contoh :

p{
background:yellow;
display:inline;
}

Jadinya

---

display:inline-block;

Elemen ini biasanya dilakukan agar tidak terjadi tabrakan ruang antara satu elemen dan elemen lainnya. Nano coba ambil contoh elemen inline diatas, dan akan Nano masukan elemen padding :

Contoh :

p{
background:yellow;
display:inline;
padding:15px;
}

Jadinya

Dan bedakan dengan yang ini :

Contoh :

p{
background:yellow;
display:inline-block;
padding:15px;
}

Jadinya

---

Alhamdulillah