CSS Display

Properti display digunakan untuk mengatur bagaimana suatu elemen itu ditampilin.

Ini masih ada hubungannya dengan pembahasan mengenai html block dan inline.

Value display

Sebenarnya ada banyak display yang tersedia. Tapi, yang umum digunakan adalah:

  • none, yaitu element dihapus / disembunyikan.
  • inline, element dalam satu baris
  • block, element dalam ukuran block
  • inline-block, element block tapi masih dalam satu baris

Penggunaannya ini sangat fleksibel ya. Misal, pada dasarnya html list <li> itu display:block; . Tapi, karena suatu hal kita bisa mengubahnya menjadi inline.

Contoh:

  • ini list defaultnya block
  • list 1
  • list 2
  • list 3

Maka kita bisa ganti dengan li {display:inline}. Menjadi:

  • ini list defaultnya block
  • list 1
  • list 2
  • list 3

Tapi, juga bisa dibuat jadi li {display:inline-block}.

  • ini list defaultnya block
  • list 1
  • list 2
  • list 3

Sekilas gak ada bedanya kan? Ya karena penggunaannya masih sederhana. Jadi, sekian pembahasan mengenai css display. Semoga paham ya!

Leave a Comment