Belajar css display: inline-block, inline, block dan none

belajar css

CSS display

Pada CSS Anda bisa mengatur tata letak untuk elemen HTML dengan property display, ini sangat berguna untuk mendesign sebuah halaman web. Semua elemen HTML memiliki nilai default dari property 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 poperty display menjadi inline, maka elemen tersebut mempunyai block tingkat menyamping. Pada HTML terdapat elemen yang mempunyai default inline, berikut listnya:

  • <span>
  • <a>
  • <img>

Contoh:

Editor Online
  1. ul#inline li {
  2. display: inline;
  3. background-color: red;
  4. padding: 10px;
  5. }

Display block

Jika Anda mengatur elemen dengan poperty 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

Contoh:

Editor Online
  1. span.block {
  2. display: block;
  3. background-color: yellow;
  4. }
  5. a.block {
  6. display: block;
  7. background-color: orange;
  8. }

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.

Contoh:

Editor Online
  1. span#inline {
  2. display: inline;
  3. }
  4. span#inline-block {
  5. display: inline-block;
  6. }
  7. span#block {
  8. display: block;
  9. }

Display none

Jika Anda mengatur elemen dengan property 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.

Contoh:

Editor Online
  1. p#none {
  2. display: none;
  3. }

Visibilty

Dengan property visibility: hidden Anda bisa menyembunyikan elemen, mungkin hampir mirip dengan property display: none, tetapi ini berbeda. Sifat dari visibility hidden yaitu, masih menyisakan ruang dan secara default nilai vibility adalah visible.

Contoh:

Editor Online
  1. h2#hidden {
  2. visibility: hidden;
  3. }

Perbedaan display none dan visibility hidden

Mungkin property 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 kevisible.
  • display: none; menyembunyikan elemen dan tidak menyita ruang tata letak, Elemen keturunan dari display none juga disembunyikan, bahkan jika property anaknya diatur ke display tampilkan mereka masih ikut disembunyikan.

Contoh:

Editor Online
  1. #hidden {
  2. visibility: hidden;
  3. height: 100px;
  4. background-color: red;
  5. }
  6. #none {
  7. display: none;
  8. height: 100px;
  9. background-color: blue;
  10. }

Daftar property display

PropertyKegunaanya
displayMenentukan bagaimana elemen harus ditampilkan
visibilityMenentukan apakah suatu elemen harus terlihat atau tidak

Leave a Reply

Your email address will not be published. Required fields are marked *