Halo teman-teman semuanya, setelah sebelumnya kita belajar cara menghias teks agar lebih nyaman dibaca, kali ini kita akan masuk ke topik yang sangat penting dalam layout halaman web, yaitu properti display dan visibility dalam CSS.
Dengan memahami kedua properti ini, kita bisa mengatur bagaimana elemen ditampilkan, apakah sebagai block, inline, atau bahkan disembunyikan tanpa menghapusnya dari dokumen.
1. Display: Mengatur Jenis Tampilan Elemen
Properti display digunakan untuk menentukan bagaimana sebuah elemen akan tampil di halaman.
Nilai umum:
block: elemen akan tampil penuh satu baris (contoh: <div>, <p>)inline: elemen tampil dalam baris dan tidak memulai baris baru (contoh: <span>, <a>)inline-block: mirip inline, tapi bisa diberi width dan heightnone: menyembunyikan elemen sepenuhnya dari tampilan dan alur dokumen
Contoh:
p {
display: block;
}
span {
display: inline;
}
img {
display: inline-block;
}
.menu {
display: none;
}
2. Visibility: Menyembunyikan Tanpa Menghapus Ruang
Properti visibility digunakan untuk mengatur apakah elemen terlihat atau tidak, tanpa menghilangkan ruangnya.
Nilai yang umum:
visible: elemen terlihat (default)hidden: elemen disembunyikan, tapi ruangnya tetap ada
Contoh:
h1 {
visibility: hidden;
}
Perbedaan penting:
display: none menghilangkan elemen dari halaman dan tidak menyisakan ruang.visibility: hidden hanya menyembunyikan elemen, tapi tempatnya masih ada.
Contoh Lengkap
Contoh berikut menunjukkan perbedaan antar jenis tampilan elemen dan efek dari menyembunyikan dengan display dan visibility.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Display & Visibility</title>
<style>
.kotak-block {
display: block;
background-color: lightblue;
padding: 10px;
margin-bottom: 10px;
}
.kotak-inline {
display: inline;
background-color: lightgreen;
padding: 10px;
}
.kotak-inlineblock {
display: inline-block;
background-color: orange;
padding: 10px;
width: 100px;
}
.hidden {
visibility: hidden;
}
.none {
display: none;
}
</style>
</head>
<body>
<div class="kotak-block">Saya block</div>
<span class="kotak-inline">Saya inline</span>
<span class="kotak-inline">Saya juga inline</span>
<div class="kotak-inlineblock">Saya inline-block</div>
<h2 class="hidden">Judul ini disembunyikan (visibility: hidden)</h2>
<h2 class="none">Judul ini tidak tampil (display: none)</h2>
</body>
</html>
Elemen block memenuhi lebar dan memulai baris baru, inline tampil dalam satu baris tanpa ukuran tetap, sedangkan inline-block bisa disusun horizontal namun tetap bisa diatur ukuran.
Dua elemen terakhir menunjukkan perbedaan antara menyembunyikan elemen sepenuhnya (display: none) dan menyembunyikan sambil tetap menyisakan ruang (visibility: hidden).
Kesimpulan
Dengan memahami properti display dan visibility, kita bisa mengatur bagaimana elemen HTML ditampilkan atau disembunyikan.
Gunakan display untuk menentukan alur tata letak elemen (block, inline, inline-block), dan visibility jika ingin menyembunyikan elemen tanpa mengganggu struktur halaman.
Di artikel berikutnya, kita akan belajar tentang Position dalam CSS — bagaimana cara menempatkan elemen di posisi yang spesifik menggunakan relative, absolute, fixed, dan sticky.
Terima Kasih