Display

Properti CSS display mengontrol cara sebuah elemen ditampilkan di halaman web. Ini memungkinkan pengembang untuk mengubah tampilan default suatu elemen HTML. Berikut adalah beberapa nilai umum yang digunakan untuk properti display:

1. inline: Elemen ditampilkan dalam baris yang sama dengan elemen sebelumnya atau sesuai dengan konteksnya, tetapi tidak memulai baris baru. Lebar dan tinggi elemen hanya sebesar konten di dalamnya.

   display: inline;

2. block: Elemen menempati lebar penuh dari parentnya dan memulai baris baru. Anda dapat mengatur lebar dan tinggi elemen serta menambahkan margin dan padding.

   display: block;

3. inline-block: Elemen ditampilkan sebagai inline, tetapi perilakunya mirip dengan block. Ini berarti elemen dapat memiliki lebar dan tinggi, serta margin dan padding, dan tetap berada dalam satu baris.

   display: inline-block;

4. none: Elemen tidak ditampilkan di halaman web. Ini sering digunakan untuk menyembunyikan elemen dengan JavaScript atau CSS.

   display: none;

5. flex: Elemen menjadi flex container, yang memungkinkan pengaturan ulang tata letak dengan flexbox. Anak-anak dari elemen ini dapat diperlakukan sebagai item flex.

   display: flex;

6. grid: Elemen menjadi grid container, yang memungkinkan pengaturan ulang tata letak dengan CSS Grid Layout. Anak-anak dari elemen ini dapat ditempatkan dalam grid.

   display: grid;

Dengan menggunakan properti display, Anda dapat mengontrol tata letak dan perilaku elemen di halaman web Anda sesuai dengan kebutuhan desain dan fungsionalitas.