Belajar CSS – display: inline-block, inline, block dan none
Dengan CSS display Anda bisa mengatur tata letak. CSS display yang paling sering digunakan yaitu dis
CSS display
Pada CSS Anda bisa mengatur tata letak untuk elemen HTML dengan properti display
, ini sangat berguna untuk mendesign sebuah halaman web. Semua elemen HTML memiliki nilai default dari properti display, nilai default untuk sebagian besar elemen adalah block atau inline. Elemen block yang berarti seperti block tingkat kebawah sedangkan elemen inline yang berarti block yang menyamping.
Mengganti nilai tampilan default
Setiap elemen memiliki nilai tampilan default antara inline atau block. Walau pun begitu Anda bisa menggantinya, misal Anda mengganti elemen inline ke elemen block, atau sebaliknya mengganti elemen block ke elemen inline. Ini sangat berguna dalam mendesign sebuah halaman web dan masih mengikuti standar web.
Display inline
Jika Anda mengatur elemen dengan properti display
menjadi inline, maka elemen tersebut mempunyai block tingkat menyamping. Pada HTML terdapat elemen yang mempunyai default inline, berikut listnya:
- <span>
- <a>
- <img>
ul#inline li {
display: inline;
background-color: red;
padding: 10px;
}
Display block
Jika Anda mengatur elemen dengan poperti display
menjadi block, maka elemen tersebut mempunyai block tingkat kebawah. Pada HTML terdapat elemen yang mempunyai default block, berikut listnya:
- <div>
- <h1> – <h6>
- <p>
- dll
span.block {
display: block;
background-color: yellow;
}
a.block {
display: block;
background-color: orange;
}
Display inline-block
Jika dibandingkan dengan display: inline, perbedaan display: inline-block
memungkinkan untuk mengatur lebar dan tinggi pada elemen.
Juga jika dibandingkan dengan display: inline-block
, Anda bisa memberikan style margin dan padding pada elemen, tetapi dengan display: inline mereka tidak.
Jika dibandingkan dengan display: block, perbedaan display: inline-block
tidak menambahkan baris-break setelah elemen, sehingga elemen dapat menyamping.
span#inline {
display: inline;
}
span#inline-block {
display: inline-block;
}
span#block {
display: block;
}
Display none
Jika Anda mengatur elemen dengan properti display menjadi none, maka elemen tersebut akan disembunyikan dan tidak menyisakan ruang apa pun, display: none
umumnya digunakan dengan JavaScript untuk menyembunyikan dan menunjukkan elemen tanpa menghapus dan menciptakan mereka.
p#none {
display: none;
}
Visibilty
Dengan properti visibility: hidden
Anda bisa menyembunyikan elemen, mungkin hampir mirip dengan properti display: none
, tetapi ini berbeda. Sifat dari visibility hidden yaitu, masih menyisakan ruang dan secara default nilai vibility adalah visible.
h2#hidden {
visibility: hidden;
}
Perbedaan display none dan visibility hidden
Mungkin properti visibility hidden dan display none hampir sama kegunaanya, tetapi mereka sebenarnya sangat berbeda dan mungkin untuk sebagian orang bisa membingungkan. Berikut perbedaan dari keduanya:
visibility: hidden;
menyembunyikan elemen, tetapi masih menyita ruang tata letak. Elemen turunan dari visibility hidden akan terlihat jika visibilitynya diatur ke-visible.display: none;
menyembunyikan elemen dan tidak menyita ruang tata letak, Elemen keturunan dari display none juga disembunyikan, bahkan jika properti anaknya diatur ke display block/tampilkan mereka masih ikut disembunyikan.
#hidden {
visibility: hidden;
height: 100px;
background-color: red;
}
#none {
display: none;
height: 100px;
background-color: blue;
}
Daftar properti display
Properti | Kegunaanya |
---|---|
display | Menentukan bagaimana elemen harus ditampilkan |
visibility | Menentukan apakah suatu elemen harus terlihat atau tidak |