CSS display

 Properti CSS display merupakan salah satu fitur CSS terpenting yang digunakan untuk mengatur tampilan tata letak elemen.

Halaman website tersusun dari berbagai elemen yang berbentuk segi empat atau kotak (baca lebih detail tentang box model.

Bentuk kotak elemen inilah yang mempengaruhinya dalam format visual halaman.

Dengan properti display, kita bisa mengontrol perilaku kotak elemen untuk ditampilkan seperti apa, disembunyikan, atau tidak ditampilkan pada visual halaman.

Secara umum, elemen bisa ditampilkan sesuai nilai display berikut:

None vs Visibility: Hidden

Kita bisa menyembunyikan elemen dengan deklarasi display: none.

Selain itu, kita juga bisa menyembunyikan elemen dengan menggunakan deklarasi visibility: hidden.

Namun kedua deklarasi tersebut memiliki perbedaan.

Untuk melihat perbedaannya, saya membuat 3 box seperti ini:

Lalu pada box warna hijau (.box-2) saya sembunyikan dengan deklarasi display: none.

.box-2 {
    background: #c8e6c9;
    display: none;
}

Contoh:

HTMLCSSPreview

Sekarang box warna hijau menjadi hilang dari tampilan halaman web.

Sebenarnya box tersebut masih ada dalam struktur HTML, namun dengan display: none menyebabkan elemen seolah-olah terhapus.

Sehingga box warna biru (.box-3) akan bergeser ke kiri dan menggunakan ruang kosong yang sebelumnya ditempati oleh box hijau.

Block

Elemen block adalah elemen yang akan memisahkan diri dari kotak garis elemen lain atau membuat baris baru.

Elemen block biasanya menempati ruang horizontal sebanyak mungkin (tergantung pada elemen block).

Agar lebih mudah dipahami, inilah karakteristik elemen level blok:

• Mengambil ruang penuh (lebar 100%) secara default.

• Selalu ditampilkan pada baris baru.

• Dapat ditentukan lebar dan tingginya dengan properti CSS width dan height.

• Dapat mengandung elemen block lain dan elemen inline atau inline-block.

Contoh elemen block yaitu <p>, <ul>, <h1->-<h6>, div>, <section>, dan <header>.

Selama tag <p> sebagai elemen level blok, maka lebar dan tingginya bisa ditentukan dengan properti width dan height.

p {
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

Contoh:

HTMLCSSPreview

Paragraf satu

Paragraf dua

Paragraf tiga

Jika lebarnya tidak ditentukan, maka lebar default <p> akan menjadi 100%.

Inline

Elemen inline (elemen level sebaris) adalah elemen yang mengalir dalam garis tanpa menyebabkannya terpisah.

Elemen inline memiliki karakteristik:

• Hanya mengambil ruang kosong yang diperlukan.

• Ditampilkan bersanding dengan elemen inline lain.

• Tidak menerima pengaturan properti width atau height, dan margin-top atau margin-bottom.

• Bisa menjadi induk dari elemen inline lain.

Contoh elemen inline yang sering digunakan misalnya span, em, dan img.

Elemen-elemen tersebut merupakan bagian dari kotak garis dan tidak menyebabkan garis itu terpisah.

Selama tag <p> diatur menjadi elemen level inline, maka penempatannya bisa bersanding dan properti CSS width & height tidak memiliki efek.

p {
  width: 100px;
  height: 100px;
  background: red;
  color: white;
  display: inline;
}

Contoh:

HTMLCSSPreview

Paragraf satu

Paragraf dua

Paragraf tiga

Inline-block

Dalam beberapa kasus, kadang kedua nilai display di atas belum cukup untuk mengatur tampilan desain menjadi lebih baik.

Solusinya bisa menggunakan kombinasi dari karakteristik nilai display block dan inline menjadi display: inline-block.

Sehingga elemen inline block bisa ditentukan lebar dan tingginya menggunakan properti width & height.

Dan elemen ini hanya mengambil ruang seperlunya, jadi tidak dimulai dari baris baru.

Sebagai contoh, saya akan mengatur tag <p> menjadi elemen inline block seperti berikut:

p {
  width: 100px;
  height: 100px;
  background: red;
  color: white;
  display: inline-block;
}

Contoh:

HTMLCSSPreview

Paragraf satu

Paragraf dua

Paragraf tiga

Sekarang elemen paragraf bisa ditempatkan bersanding dan lebar & tingginya juga bisa ditentukan.