Layout CSS - Atribut display

display Properti display adalah properti CSS yang paling penting untuk mengontrol tata letak.

Properti display

display Aturan untuk menentukan atau bagaimana elemen ditampilkan.

Setiap elemen HTML memiliki nilai display default, yang tergantung pada tipe elemennya. Sebagian besar elemen memiliki nilai display default seperti block atau inline.

Klik untuk menampilkan panel

Panel ini mengandung elemen <div>, yang secara default disembunyikan.display: none)

Ini disetting gaya CSS, dan kami menggunakan JavaScript untuk menampilkan nya. (Ubah ke display: block)

Elemen blok (block element)

Elemen blok selalu mulai baris baru dan mengambil seluruh lebar yang tersedia (sejauh mungkin mengeksendiri ke arah kiri dan kanan).

Elemen <div> ini termasuk elemen blok.

Beberapa contoh elemen blok:

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

Elemen dalam baris (inline element)

Elemen dalam baris tidak mulai baris baru, hanya mengambil lebar yang diperlukan.

Ini adalah paragraf dalamElemen <span> dalam baris.

Beberapa contoh elemen dalam baris:

  • <span>
  • <a>
  • <img>

Display: none;

display: none; biasanya digunakan bersamaan dengan JavaScript untuk menyembunyikan dan menampilkan elemen tanpa menghapus dan membuat ulangnya. Jika Anda ingin mengetahui bagaimana mencapai tujuannya, lihat contoh terakhir di halaman ini.

secara standar<script> elemen menggunakan display: none;.

Timbulkan nilai Display Default

Seperti yang disebutkan sebelumnya, setiap elemen memiliki nilai display default. Namun, Anda dapat menimbulkannya.

Mengubah elemen dalam baris menjadi elemen blok, dan sebaliknya, sangat berguna untuk membuat halaman tampil dengan cara yang spesifik sambil tetap mengikuti standar Web.

Sebuah contoh yang umum adalah untuk membuat menu horisontal dengan elemen dalam baris. <li> elemen:

contoh

li {
  display: inline;
}

Coba Sendiri

Perhatian:mengatur properti display elemen hanya akan mengubahcara tampil elementanpa mengubah jenis elemen. Oleh karena itu, elemen dengan display: block; elemen dalam baris tidak mengizinkan untuk mengandung elemen blok lainnya.

Contoh di bawah ini akan menampilkan elemen <span> sebagai elemen blok:

contoh

span {
  display: block;
}

Coba Sendiri

Contoh di bawah ini akan menampilkan elemen <a> sebagai elemen blok:

contoh

a {
  display: block;
}

Coba Sendiri

Sembunyikan elemen - display: none atau visibility: hidden?

display: none

visibility: hidden

Reset

dengan memanipulasi display aturan properti none Elemen dapat disembunyikan. Elemen ini akan disembunyikan, dan halaman akan menunjukkan seperti jika elemen ini tidak ada didalamnya:

contoh

h1.hidden {
  display: none;
}

Coba Sendiri

visibility: hidden; Elemen dapat disembunyikan.

Namun, elemen ini tetap akan mengambil ruang yang sama seperti sebelumnya. Elemen akan disembunyikan, tetapi masih akan mempengaruhi tata letak:

contoh

h1.hidden {
  visibility: hidden;
}

Coba Sendiri

Contoh Lainnya

Perbedaan antara display: none; dan visibility: hidden;
Contoh display: none; VS visibility: hidden;
Menggabungkan CSS dan JavaScript untuk menampilkan konten
Contoh cara menggunakan CSS dan JavaScript untuk menampilkan elemen saat klik.

Properti Display/Visibility CSS

Properti Deskripsi
display Menentukan cara menampilkan elemen.
visibility Menentukan apakah elemen harus terlihat.