Perbedaan Property CSS Visibility hidden dengan display none

Halo teman-teman dumenity, pada kesempatan kali ini memberitahukan bagaimana perbedaan antara property CSS visibility:hidden dengan display:none. Pada dasarnya property ini memiliki fungsi yang sama yaitu menyembunyikan suatu objek / hidden. Nah lalu apa perbedaannya menggunakan keduanya ? perbedaannya yaitu terletak pada space yang ada pada objek yang kita sembunyikan. Coba teman-teman perhatikan source code dibawah ini :

 

See the Pen waGWgm by fachrul ahaddin (@fachruldumet) on CodePen.

 

Dalam kasus ini, saya ingin menyembunyikan kotak berwarna biru. Pada baris kedua terlihat ada space satu kotak diantara kotak merah dan hijau, itu karena saya menyembunyikannya menggunakan visibility:hidden. Berbeda halnya pada baris ketiga, kotak birunya disembunyikan tapi diantara kotak merah dan kotak hijau tidak ada space, malah kotak hijau bergeser ke tempat kotak biru yang disembunyikan. Itu saya menggunakan display:none.

Bagaimana teman-teman? Sudah jelas ya perbedaannya. Tinggal dipakai saja sesuai keperluan teman-teman ya. Terima kasih sudah menyimak artikel ini, semoga bermanfaat dan terima kasih

13 Mei 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat