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