CSS - Display

Properti Display menentukan jika / bagaimana suatu elemen ditampilkan.

Setiap elemen HTML memiliki nilai Display default tergantung pada jenis elemen apa itu. Nilai Display default untuk sebagian besar elemen adalah block atau inline

Level Block Elemen

Level block Elemen selalu dimulai pada garis baru dan menampilkan width penuh

Elemen <div> adalah level block elemen.

Contoh level block elemen:

<div>

<h1> - <h6>

<p>

<form>

<header>

<footer>

<section>

Inline elemen

Inline elemen  tidak dimulai pada baris baru dan hanya membutuhkan lebar sebanyak yang diperlukan.

Ini adalah elemen <span> sebaris di dalam paragraf.

Contoh elemen sebaris / inline elemen:

<span>

<a>

<img>

Display: None; 

display: none; umumnya digunakan dalam desain web responsif untuk menyesuaikan tata letak dari setiap perangkat yang mungkin digunakan (desktop, tablet, seluler).

Contoh  umum adalah bagaimana mengatur menu apa saja yang akan ditampilkan ketika tampilan layar diperkecil atau berubah

Sebelum diperkecil :

Coba ubah ukuran browser yang sedang digunakan hingga di bawah 768px, dan kemudian lihat apa yang terjadi:

 

Sekian penjelasan singkat menggenai display pada css. semoga bermanfaat.

Share this post