Display dan Visibility

Dalam tutorial ini, kita akan membahas penggunaan properti CSS display dan visibility untuk mengontrol tampilan elemen HTML di halaman web Anda. Mari kita mulai!

1. Properti display

Properti display digunakan untuk mengontrol bagaimana elemen HTML ditampilkan di halaman web. Ada beberapa nilai yang bisa digunakan:

  • display: block;: Membuat elemen tersebut menjadi blok yang memenuhi lebar kontainer dan berada di baris berikutnya.
  • display: inline;: Membuat elemen tersebut menjadi inline sehingga hanya mengambil ruang yang diperlukan oleh kontennya.
  • display: inline-block;: Menggabungkan sifat inline dan block sehingga elemen dapat memiliki lebar dan tinggi.
  • display: none;: Menghilangkan elemen dari tampilan, sehingga tidak terlihat.

Contoh penggunaan:

/* Membuat sebuah div menjadi blok */
div.block {
  display: block;
}

/* Membuat sebuah span menjadi inline */
span.inline {
  display: inline;
}

/* Menghilangkan sebuah elemen dari tampilan */
p.hidden {
  display: none;
}

2. Properti visibility

Properti visibility digunakan untuk mengontrol apakah elemen tetap ada di dalam dokumen meskipun tidak terlihat. Terdapat dua nilai yang bisa digunakan:

  • visibility: visible;: Membuat elemen terlihat.
  • visibility: hidden;: Membuat elemen tidak terlihat tetapi tetap memakan ruang di dalam layout.

Contoh penggunaan:

/* Membuat sebuah elemen terlihat */
div.visible {
  visibility: visible;
}

/* Membuat sebuah elemen tidak terlihat tetapi masih memakan ruang */
p.hidden-visibility {
  visibility: hidden;
}

3. Contoh penggunaan keduanya

/* Menggabungkan display block dan visibility hidden */
div.hidden-block {
  display: block;
  visibility: hidden;
}

Dengan menggabungkan kedua properti ini, Anda dapat membuat elemen tetap ada di dalam dokumen tetapi tidak terlihat.

Sekarang Anda telah memahami penggunaan properti display dan visibility dalam CSS. Anda dapat menggunakannya untuk mengontrol tampilan elemen HTML di halaman web Anda sesuai kebutuhan. Semoga tutorial ini bermanfaat!

PREVIOUS
NEXT