Properti display pada CSS merupakan properti paling penting untuk mengontrol layout. Untuk itu, dibawah ini akan dijelaskan secara rinci tentang properti display bagaimana cara penerapannya dan fungsinya.
Section Artikel
Poperti Display
Properti display biasanya digunakan untuk menentukan bagaimana sebuah elemen akan ditampilkan.
Setiap elemen HTML memiliki nilai tampilan default tergantung pada jenis elemennya. Nilai tampilan default untuk sebagian besar elemen adalah blok atau baris.
Elemen Block-level
Elemen block-level selalu dimulai dengan baris baru dan akan menempati lebar penuh yang tersedia (membentang ke kiri dan kanan sejauh mungkin).
Contoh elemen block-level pada HTML :
Elemen Inline
Elemen inline tidak dimulai pada baris baru dan hanya membutuhkan lebar yang diperlukan berkebalikan dengan elemen block-level.
Contoh elemen inline pada HTML :
- <span>
- <a>
- <img>
Display: none;
Display: none; biasanya digunakan bersamaan dengan JavaScript untuk menyembunyikan dan menampilkan elemen tanpa menghapus dan membuatnya kembali. Lihatlah contoh terakhir di halaman ini agar paham bagaimana cara penggunaannya.
Elemen <script> menggunakan display: none; sebagai default.
Mengganti Nilai Tampilan Default
Seperti yang telah dijelaskan sebelumnya, setiap elemen memiliki nilai tampilan default. Namun, nilai tersebut dapat diubah.
Mengubah elemen inline menjadi elemen block-level atau sebaliknya. Hal ini berguna untuk membuat halamann web terlihat sesuai keinginan kita, namun tetap mengikuti standar web.
Contoh yang paling umum adalah membuat elemen sebaris <in> untuk menu horizontal:
<!DOCTYPE html>
<html>
<head>
<style>
li {
display: inline;
}
</style>
</head>
<body>
<p>Menampilkan daftar link sebagai menu horizontal:</p>
<ul>
<li><a href="/html/default.asp" target="_blank">HTML</a></li>
<li><a href="/css/default.asp" target="_blank">CSS</a></li>
<li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>
</body>
</html>
Catatan: Mengatur properti display sebuah elemen hanya mengubah bagaimana elemen tersebut akan ditampilkan, BUKAN jenis elemennya. Jadi, elemen inline dengan display: block; tidak diperbolehkan memiliki elemen blok lain di dalamnya.
Contoh berikut menampilkan elemen <span> sebagai elemen block:
<!DOCTYPE html>
<html>
<head>
<style>
span {
display: block;
}
</style>
</head>
<body>
<span>Properti display yang memiliki nilai "block" menghasilkan </span> <span> pergantian baris di antara dua elemen.</span>
</body>
</html>
Contoh berikut menampilkan elemen <a> sebagai elemen block:
<!DOCTYPE html>
<html>
<head>
<style>
a {
display: block;
}
</style>
</head>
<body>
<p>Link ditampilkan sebagai elemen block:</p>
<a href="/html/default.asp" target="_blank">HTML</a>
<a href="/css/default.asp" target="_blank">CSS</a>
<a href="/js/default.asp" target="_blank">JavaScript</a>
</body>
</html>
Menyembunyikan elemen dapat dilakukan dengan mengatur properti display: none. Elemen akan disembunyikan, dan halaman akan ditampilkan seolah-olah elemen tersebut tidak ada.
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
display: none;
}
</style>
</head>
<body>
<h1>Ini adalah heading yang ditampilkan</h1>
<h1 class="hidden">Ini adalah heading yang disembunyikan</h1>
<p>Perhatikan bahwa elemen h1 dengan display: none; tidak mengambil tempat.</p>
</body>
</html>
visibility: hidden; juga dapat digunakan untuk menyembunyikan elemen.
Namun, elemen tersebut akan tetap menempati ruang yang sama seperti sebelumnya. Elemen tersebut akan disembunyikan, tetapi masih memengaruhi tata letak.
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<h1>Ini heading yang ditampilkan</h1>
<h1 class="hidden">Ini heading yang disembunyikan</h1>
<p>Perhatikan bahwa heading tersembunyi masih membutuhkan tempat.</p>
</body>
</html>
Properti Display / Visibility pada CSS
| Properti | Deskripsi |
| display | Menentukan bagaimana sebuah elemen harus ditampilkan |
| visibility | Menentukan apakah sebuah elemen harus ditampilkan atau tidak |
