CSS Display

Sekarang kita masuk ke materi penting berikutnya dalam CSS yaitu CSS Display. Properti display adalah penentu utama bagaimana elemen HTML ditampilkan di halaman web, apakah dalam baris, kotak, grid, atau tersembunyi.

Apa Itu `display`?

display adalah properti CSS yang menentukan bagaimana sebuah elemen berperilaku di dalam layout.

Apakah dia tampil dalam baris (inline), blok (block), atau layout kompleks seperti flex atau grid.

Nilai Umum dari `display`

Berikut ini adalah nilai umum yang biasa diberikan untuk properti display.

Nilai	Fungsi
`block`	Elemen tampil sebagai blok penuh (default untuk `<div>`, `<p>`)
`inline`	Elemen tampil sebaris, tidak bisa atur lebar/tinggi (`<span>`)
`inline-block`	Seperti inline tapi bisa diatur ukuran (`width` & `height`)
`none`	Menyembunyikan elemen (tidak tampil di halaman)
`flex`	Mengaktifkan Flexbox layout (untuk membuat layout fleksibel)
`grid`	Mengaktifkan CSS Grid layout
`inline-flex`	Flex sebaris
`inline-grid`	Grid sebaris

Contoh Dasar: `Block` vs `Inline`

<style>
  .blok {
    display: block;
    background-color: lightblue;
    margin-bottom: 10px;
  }

  .inline {
    display: inline;
    background-color: pink;
    margin-right: 10px;
  }
</style>

<p class="blok">Ini elemen block</p>
<span class="inline">Inline 1</span>
<span class="inline">Inline 2</span>

Contoh `inline-block`

<style>
  .kotak {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: #4caf50;
    margin-right: 10px;
  }
</style>

<div class="kotak"></div>
<div class="kotak"></div>

Display None (Menyembunyikan Elemen)

.hidden {
  display: none;
}

Elemen yang mendapat display: none; tidak akan tampil dan tidak mengambil ruang di halaman.

Display: `Flex` & `Grid`

Flex

.container {
  display: flex;
  justify-content: space-between;
}

Grid:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Materi Flexbox dan Grid sudah kamu pelajari sebelumnya. Di sini kita hanya bahas peran display-nya saja.

Tips Penting

Default display:
- <div> = block
- <span> = inline
Gunakan inline-block untuk elemen sebaris yang butuh ukuran
Gunakan none untuk menyembunyikan elemen (misalnya saat toggle menu)
Gunakan display: flex; dan grid untuk layout modern dan responsif

Kesimpulan

display sangat penting untuk:

Mengatur struktur layout
Membuat elemen tampil sesuai kebutuhan
Membangun desain yang fleksibel & modern

CSS Display

Apa Itu display?

Nilai Umum dari display

Contoh Dasar: Block vs Inline

Contoh inline-block