Display Dasar

Dua tautan yang ditulis berurutan tampil berdampingan dalam satu baris, sedangkan dua paragraf yang ditulis berurutan selalu menempati baris masing-masing. Perbedaan ini lahir dari nilai display bawaan setiap elemen, yang menentukan apakah kotaknya berdiri sendiri atau mengalir bersama teks. Pada Chapter ini kita mengenal empat nilai yang paling sering dipakai, lalu mempraktikkannya dengan mengubah daftar vertikal menjadi menu navigasi horizontal.

Nilai Display Bawaan Elemen #

Browser membagi elemen menjadi dua kelompok besar berdasarkan nilai display bawaannya:

Elemen li berada di antara keduanya dengan nilai bawaan list-item: berperilaku seperti block sekaligus menampilkan penanda bullet atau nomor. Untuk tahap saat ini, anggap li sebagai anggota kelompok block dengan penanda tambahan.

display: block #

Nilai block membuat elemen berperilaku seperti paragraf: selalu memulai baris baru, lebarnya memenuhi induk, dan properti width, height, serta margin vertikal berlaku penuh. Elemen div adalah contoh paling murni karena tidak membawa makna khusus, sehingga sering dipakai sebagai wadah layout.

display: inline #

Nilai inline membuat elemen berperilaku seperti potongan teks: elemen mengalir di dalam baris dan hanya selebar isinya. Tautan a dan span adalah contohnya — keduanya menyatu dengan kalimat tanpa memutus baris. Konsekuensinya penting diingat:

• width dan height tidak berpengaruh pada elemen inline yang bukan gambar.
• margin-top dan margin-bottom tidak menggeser elemen di sekitarnya, sedangkan margin dan padding horizontal tetap bekerja normal.

display: inline-block #

Nilai inline-block menggabungkan dua dunia: elemen mengalir berdampingan seperti inline, tetapi tetap menerima width, height, dan margin vertikal seperti block. Nilai ini sering dipakai untuk item yang berjajar — menu navigasi, label, atau deretan tombol — ketika setiap item butuh ukuran dan jarak yang terkontrol.

display: none #

Nilai none mengeluarkan elemen dari proses perenderan: elemen tidak tampil dan ruangnya ikut hilang, seolah tidak pernah ada di halaman. Nilai ini berbeda dari visibility: hidden, yang tetap menyembunyikan elemen tetapi ruangnya tetap terpakai sehingga layout tidak bergeser. Pada section berikutnya kita akan melihat JavaScript memanfaatkan display: none untuk menampilkan dan menyembunyikan konten.

Contoh: Menu Navigasi Horizontal #

Tanpa CSS, deretan li di dalam ul tersusun vertikal karena setiap li berperilaku seperti block. Contoh berikut mengubah susunannya menjadi menu horizontal seperti pada umumnya situs web. Perhatikan juga pola selector .menu li: selector class diikuti elemen memilih li yang berada di dalam elemen ber-class menu, sebuah perluasan langsung dari selector dasar yang telah kita pelajari. File katalog.html dan kontak.html hanyalah rujukan; sediakan filenya sendiri bila ingin tautannya berfungsi. Simpan kedua file dalam satu folder, lalu buka file HTML:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Menu Navigasi</title>
  <link rel="stylesheet" href="gaya-menu.css">
</head>
<body>
  <ul class="menu">
    <li><a href="index.html">Beranda</a></li>
    <li><a href="katalog.html">Katalog</a></li>
    <li><a href="kontak.html">Kontak</a></li>
  </ul>
</body>
</html>

body {
  font-family: sans-serif;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 16px;
  background-color: #1e293b;
}

.menu li {
  display: inline-block;
  margin-right: 24px;
}

.menu a {
  color: #ffffff;
  text-decoration: none;
}

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Satu bilah gelap selebar jendela di bagian atas halaman
  - Tiga tautan putih — Beranda, Katalog, Kontak — berjajar horizontal
  - Jarak 24px di antara setiap tautan, tanpa bullet di depannya

Mari kita telaah aturan yang mengubah daftar menjadi menu:

1. .menu dengan list-style: none: properti list-style mengatur penanda daftar; nilai none menghapus bullet bawaan ul.
2. .menu dengan margin: 0 dan padding: 16px: jarak bawaan daftar dinetralkan, lalu bilah menu diberi bantalan sendiri.
3. .menu li dengan display: inline-block: inti perubahan — tiga li yang tadinya berdiri sendiri kini berjajar dalam satu baris.
4. .menu li dengan margin-right: 24px: jarak antaritem; margin horizontal bekerja pada inline-block, berbeda dari inline murni.
5. .menu a dengan color: #ffffff dan text-decoration: none: tautan diputihkan agar terbaca di bilah gelap, dan garis bawah bawaannya dihapus.

Dengan display, kita dapat mengatur kotak agar berdiri sendiri, mengalir dalam teks, atau berjajar sebagai menu — cukup untuk layout halaman sederhana. Ketika tata letak makin rumit, misalnya meratakan item dengan jarak yang menyesuaikan otomatis, CSS menyediakan modul khusus bernama flexbox yang menanti setelah fondasi ini kokoh.

Referensi resmi untuk pendalaman:

• MDN Web Docs — display
• MDN Web Docs — visibility
• MDN Web Docs — Learn: Styling basics

body {
  font-family: sans-serif;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 16px;
  background-color: #1e293b;
}

.menu li {
  display: inline-block;
  margin-right: 24px;
}

.menu a {
  color: #ffffff;
  text-decoration: none;
}

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Menu Navigasi</title>
  <link rel="stylesheet" href="gaya-menu.css">
</head>
<body>
  <ul class="menu">
    <li><a href="index.html">Beranda</a></li>
    <li><a href="katalog.html">Katalog</a></li>
    <li><a href="kontak.html">Kontak</a></li>
  </ul>
</body>
</html>