Latest web development tutorials

CSS Tampilan (display) dan Visibility (visibilitas)

Bagaimana menampilkan properti elemen diatur untuk ditampilkan, atribut visibilitas menetapkan bahwa unsur harus terlihat atau tersembunyi.

kotak 1

kotak 2
kotak 3

elemen tersembunyi - display: none atau visibility: hidden

Menyembunyikan elemen dengan atribut display diatur ke "none", atau properti visibilitas untuk "tersembunyi". Namun, perlu diketahui kedua metode ini akan menghasilkan hasil yang berbeda.

visibility: hidden untuk menyembunyikan elemen, tapi elemen tersembunyi tetap sama seperti sebelumnya pendudukan dan tidak tersembunyi ruang. Artinya, meskipun elemen tersembunyi, namun tetap mempengaruhi tata letak.

contoh

h1.hidden {visibility:hidden;}

Coba »

display: none untuk menyembunyikan elemen, dan unsur-unsur tersembunyi tidak mengambil ruang apapun. Dengan kata lain, unsur ini tidak hanya tersembunyi, dan ruang yang ditempati oleh elemen asli akan hilang dari tata letak halaman.

contoh

h1.hidden {display:none;}

Coba »


CSS Display - Blok dan inline elemen

Elemen blok merupakan elemen, mengambil seluruh lebar satu baris sebelum dan setelah.

Contoh elemen blok:

  • <H1>
  • <P>
  • <Div>

elemen inline hanya perlu lebar yang diperlukan, tidak memaksa jeda baris.

Contoh elemen inline:

  • <Span>
  • <a>

Cara mengubah elemen display

Anda dapat mengubah elemen blok dan elemen inline, dan sebaliknya, dapat membuat halaman tampilan adalah kombinasi dari cara tertentu, dan masih mengikuti standar web.

Contoh berikut menampilkan daftar item sebagai elemen inline:

contoh

li {display:inline;}

Coba »

Berikut elemen misalnya rentang sebagai elemen blok:

contoh

span {display:block;}

Coba »

Catatan: Mengubah jenis elemen layar untuk melihat bagaimana elemen ditampilkan, itu adalah jenis elemen.Sebagai contoh: Sebuah elemen inline diatur ke display: block tidak diizinkan untuk memiliki unsur internal bersarang blok sendiri.


contoh

contoh yang lebih

Bagaimana menampilkan elemen inline.

Contoh ini menunjukkan bagaimana menampilkan inline elemen.

Bagaimana menampilkan elemen blok.

Contoh ini menunjukkan bagaimana menampilkan elemen elemen blok.

Cara menggunakan runtuhnya properti meja.

Contoh ini menunjukkan bagaimana menggunakan tabel properti runtuh.