Tampilan

CSS Tampilan dan Visibility
«Sebelumnya
Tonton video tutorial ini
Next Chapter »

Properti display menentukan apakah / bagaimana elemen ditampilkan, dan properti visibilitas menentukan apakah sebuah elemen akan terlihat atau tersembunyi.
kotak 1
Klematis
kotak 2
Klematis
kotak 3
Klematis
Menyembunyikan Elemen - display: none atau visibility: hidden

Menyembunyikan elemen dapat dilakukan dengan menyetel properti tampilan untuk "none" atau properti visibilitas untuk "tersembunyi". Namun, perhatikan bahwa kedua metode ini menghasilkan hasil yang berbeda:

visibility: hidden menyembunyikan elemen, tetapi masih akan mengambil ruang yang sama seperti sebelumnya. Unsur akan disembunyikan, tapi masih mempengaruhi tata letak.
contoh
h1.hidden {
     visibility: hidden;
}

Cobalah sendiri »

display: none menyembunyikan elemen, dan itu tidak akan mengambil ruang apapun. Unsur akan disembunyikan, dan halaman akan ditampilkan seolah-olah unsur tidak ada:
contoh
h1.hidden {
     display: none;
}

Cobalah sendiri »

CSS Tampilan - Blok dan Inline Elemen

Sebuah elemen blok merupakan elemen yang mengambil lebar penuh yang tersedia, dan memiliki satu baris sebelum dan sesudahnya.

Contoh unsur-unsur blok:

     <h1>
     <p>
     <li>
     <div>

Sebuah elemen inline hanya membutuhkan sebanyak lebar yang diperlukan, dan tidak memaksa jeda baris.

Contoh elemen inline:

     <span>
     <a>

Mengubah Bagaimana sebuah Elemen yang ditampilkan

Mengubah elemen inline dengan elemen blok, atau sebaliknya, dapat berguna untuk membuat halaman terlihat dengan cara tertentu, dan masih mengikuti standar web.

Contoh berikut menampilkan <li> elemen sebagai elemen inline:
contoh
li {
     display: inline;
}

Cobalah sendiri »

Contoh berikut menampilkan <span> elemen sebagai elemen block:
contoh
rentang {
     display: block;
}