Điểm khác biệt giữa visibility:hidden và display:none là gì?

visibility:hidden và display:none giống nhau đều là hai thuộc tính quản lí việc hiển thị của phần tử trên trang và cùng thực hiện chung một chức năng là ẩn phần tử khỏi sự quan sát 👀 của người sử dụng trang web theo mục đính của chủ website. Tuy nhiên, visibility:hidden và display:none lại thực hiện hai cách thực hiện ẩn hiển thị khác nhau và bài viết au đây tui sẽ nêu những khác biệt của chúng để các ông có thể nắm bắt và sử dụng một cách hợp lí hai thuộc tính trên.

Điểm khác biệt giữa visibility:hidden và display:none là gì?

display:none

Đầu tiên ta xét đến thuộc tính được sử dụng nhiều nhất đó là display:none. khi thuộc tính này được thiết lập, phần tử sẽ được xem như là "biến mất" hoàn toàn khỏi trang web. Như việc nó chưa bao giờ tồn tại mặc dù nó có tồn tại😄.

visibility:hidden

Đối với thuộc tính này, thì phần tử chỉ đơn giản là trở nên trong suốt với người xem. Tuy nhiên nó vẫn chiếm dụng không gian trong trang web.
Tương tự như việc có một người đang tàng hình đứng giữa ông và một thằng bạn khác của ông, thằng tàng hình đó tồn tại ở đó, nhưng chỉ đơn giản là các ông không thấy được nó thôi. Khi hai ông tiến lại gần nhau thì sẽ va phải thằng tàng hình đó, còn với display:none thì không.

Ví dụ

Sau đây là bản demo cho các ông thấy cách mà visibility:hidden và display:none hoạt động

Tổng kết

display:none

• Biến mất hoàn toàn
• Không chiếm dụng không gian

visibility:hidden

• Đơn giản là làm người dùng không thấy được phần tử
• Vẫn chiếm dụng không gian như thường
• Khá tương tự như thuộc tính opacity:0;