Display CSS adalah properti yang menentukan bagaimana elemen HTML harus ditampilkan di halaman web.

Properti ini memungkinkan kamu mengontrol layout dan perilaku elemen, seperti apakah elemen harus ditampilkan sebagai blok, sejajar dengan elemen lain, atau bahkan tidak ditampilkan sama sekali.

Di artikel ini, kita akan menjelajahi berbagai aspek dari display CSS, mulai dari konsep dasar sampai teknik-teknik lanjutan yang diperlukan untuk meningkatkan pengalaman pengguna. Selamat membaca!

Values di Properti Display CSS

Properti display CSS memiliki berbagai values yang untuk mengubah tampilan elemen. Properti ini akan memudahkan dalam mengatur layout halaman web:

Syntax Dasar Display CSS

Syntax adalah aturan dasar penulisan yang membantu browser memahami cara menampilkan elemen sesuai keinginan. Berikut syntax dasar untuk properti display CSS:

selector {
  display: value;
}

  • selector: bagian ini merupakan menentukan elemen HTML mana yang akan kamu atur tampilannya.

  • value: bagian ini adalah value dari properti display yang ingin kamu gunakan, seperti block, inline, flex, dll.

Display CSS: Inline

Tipe display inline membuat elemen ditampilkan sejajar dengan elemen lain atau dengan teks di sekitarnya, tanpa memulai baris baru. Menggunakan tipe display ini berguna saat kamu ingin mengatur style untuk bagian tertentu dari teks atau elemen, tapi tidak ingin mengubah layout keseluruhan halaman web.

Beberapa tag seperti < span > juga menggunakan display inline sebagai default.

Karakteristik utama dari display inline adalah:

  • Lebar dan tinggi: elemen dengan tipe display inline tidak bisa mengatur lebar dan tinggi. Lebar dan tinggi elemen akan otomatis disesuaikan dengan kontennya.

  • Margin dan padding: elemen inline bisa memiliki margin dan padding, tetapi hanya pada sisi kiri dan kanan, bukan atas dan bawah.

  • Baris baru: elemen inline tidak memulai baris baru pada halaman, sehingga elemen lain dapat diletakkan di sebelahnya.

Salah satu contoh elemen HTML yang secara default memiliki tipe display inline adalah elemen span. Berikut contoh penggunaannya:

Ini adalah teks merah di dalam paragraf.

Dalam contoh di atas, elemen span dipakai untuk mengubah warna teks menjadi merah, tanpa mengubah struktur atau layout dari paragraf tersebut. Elemen span tetap berada dalam baris yang sama dengan teks lain di sekitarnya.

Display CSS: Block

Tipe display CSS: block akan selalu memulai baris baru dan mengambil seluruh lebar yang tersedia pada container parent-nya. Tipe display ini berfungsi ketika kamu ingin membuat struktur layout halaman web, seperti pembagian kolom, header, dan footer.

Hampir semua tag di HTML mempunyai display block sebagai default display-nya.

Berikut beberapa karakteristik dari tipe display block:

  • Lebar dan tinggi: elemen block bisa mengatur lebar dan tinggi secara eksplisit. Jika tidak diatur, lebar elemen akan mengisi seluruh lebar container, sedangkan tingginya disesuaikan dengan konten di dalamnya.

  • Margin dan padding: elemen block dapat memiliki margin dan padding di semua sisi, termasuk atas dan bawah.

  • Baris baru: Elemen block selalu memulai baris baru, sehingga elemen lain tidak bisa diletakkan di sebelahnya pada baris yang sama.

Elemen HTML yang secara default merupakan tipe display block adalah div. Berikut contoh penggunaan elemen div sebagai tipe display block.

Kamu menggunakan elemen div untuk membuat blok dengan background biru muda dan padding di sekelilingnya. Elemen div akan mengambil seluruh lebar yang tersedia dan memulai baris baru pada halaman web.


  Ini adalah elemen div dengan latar belakang biru muda.