CSS Display

Mengatur tampilan (display)

Display adalah termasuk property untuk hampir semua elemen HTML.
Display berarti : tampilan atau bagaimana suatu elemen akan ditampilkan.

Bagaimana suatu elemen akan ditampilkan = display :value;

Pengaturan display ini terkait dengan pembahasan level elemen Block & Inline.

Tabel dibawah ini adalah daftar beberapa jenis value untuk tampilan (display) yang paling sering digunakan.

Value tampilan	Keterangan
block	Memblokade ruang dan menggeser elemen disebelahnya.
inline	Sebaris dengan elemen disebelahnya.
inline-block	Sebaris dengan elemen disebelahnya dan memblokade ruang tersisa.
none	Menghilangkan elemen.
hidden	(visibility) Menyembunyikan elemen
flex	Berjajar mendatar
grid	Berjajar tegak

Penggunaan property display: block;

Property display:block; berfungsi untuk mengatur elemen inline agar dapat ditampilkan (block) memenuhi sisa ruang dan menggeser elemen disebelahnya.

Misal elemen span yang merupakan elemen level inline, yang tampilan normalnya adalah sebaris sejajar dengan elemen disebelahnya.

Contoh elemen span tanpa pengaturan display.

teks span teks span teks span

Penerapan :

<span> teks span</span><span> teks span</span>
<span> teks span</span><span> teks span</span>

<style>
  span {
  background-color: dodgerblue;
  color: white;
  padding: 5px 10px;
  margin: 5px;
  display: block;
  }
</style>

teks span teks span teks span teks span

Berdasarkan contoh diatas, bisa dikatakan bahwa properti display: block; menjadikan elemen memiliki width:100%;.

Penggunaan property display: inline;

Untuk property display: inline merupakan kebalikan dari display: block, yaitu:
digunakan untuk mengatur elemen level block agar ditampilkan sejajar bersebelahan dengan elemen disebelahnya (inline).

<p> teks paragraf</p>
<p> teks paragraf</p>
<p> teks paragraf</p>
<p> teks paragraf</p>

<style>
  p {
  background-color: dodgerblue;
  color: white;
  padding: 5px 10px;
  margin: 25px 5px;/* margin-top & -bottom 25px tidak berfungsi */
  display: inline;
  }
</style>

teks paragraf

teks paragraf

teks paragraf

teks paragraf

Perhatikan hasil dari contoh diatas.

Paragraf adalah elemen level block yang sifatnya memenuhi ruang barisnya (memblokade halaman secara penuh), tetapi dengan ditetapkan properti display:inline akhirnya tampak seperti elemen level inline.

CATATAN (kesimpulan) :
Pada penetapan display:inline pada suatu elemen dapat melemahkan fungsi properti atau bisa dikatakan tidak respect terhadap properti dibawah ini :

1. width
2, height
3. margin-top dan margin-bottom
4. padding-top dan padding-bottom

Sebalikya, properti diatas justru diperkuat (direspect) pada penggunaan display: inline-block sehingga dengan elemen yang sama tampilan elemen inline-block tampak seperti dibawah ini.

Penggunaan property display: inline-block;

<p> teks paragraf</p>
<p> teks paragraf</p>
<p> teks paragraf</p>
<p> teks paragraf</p>

<style>
  p {
  background-color: dodgerblue;
  color: white;
  padding: 5px 10px;
  margin: 5px;
  display: inline;
  }
</style>

teks paragraf

teks paragraf

teks paragraf

teks paragraf

Baca juga Elemen block.

Penggunaan property display: flex;

<span> teks span</span><span> teks span</span>
<span> teks span</span><span> teks span</span>

<style>
  span {
  background-color: dodgerblue;
  color: white;
  padding: 5px 10px;
  margin: 5px;
  display: flex;
  }
</style>

teks span teks span teks span teks span

Lihat penggunaan Properti CSS flex

Penggunaan property display: grid;

<span> teks span</span><span> teks span</span>
<span> teks span</span><span> teks span</span>

<style>
  span {
  background-color: dodgerblue;
  color: white;
  padding: 5px 10px;
  margin: 5px;
  display: grid;
  }
</style>

teks span teks span teks span teks span

Penggunaan property display: none & visibility:hidden

<span class='none'> teks span</span>
<span> teks span</span>
<span class='hidden'> teks span</span>
<span> teks span</span>

<style>
  span.none {
  display: none
}
  span.hidden {
  visibility: hidden;
}
</style>

teks span teks span teks span teks span

Catatan :

Property CSS visibility: hidden adalah berfungsi untuk "menyembunyikan visual" elemen TANPA menghilangkan lokasi (dimensi) elemen.
Hal ini bebeda dengan display:none; yang memang menghilangkan elemen beserta lokasinya sehingga akan ditempati oleh elemen lain disekitarnnya.