Belajar CSS – display: inline-block, inline, block dan none

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