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