Khác nhau giữa display: none vs visibility: hidden trong CSS

visibility: hidden là gì? display: none là gì? Chúng khác nhau ở điểm nào thì bài viết này chúng ta cùng nhau tìm hiểu nhé 👌.

display: none trong CSS

display là thuộc tính chỉ định cách mà một phần tử hiển thị.

display: none có nhiệm vụ làm cho một phần tử ẩn đi. Khi sử dụng thuộc tính này với giá trị none, nó sẽ làm cho phần tử không còn chiếm không gian hiển thị, giống như nó chưa hề có mặt tại vị trí đó 😁. Tất cả các phần tử con của phần tử lúc này cũng sẽ bị ẩn đi.

Tóm lại với giá trị none, nó sẽ làm cho phần tử biến mất khỏi layout.

visibility: hidden trong CSS

visibility là thuộc tính làm cho phần tử có thể hiển thị trên màn hình hay không. Nghe thì khá giống với display: none, nhưng thật sự nó khác hoàn toàn với display: none.

Khi sử dụng visibility: hidden phần tử sẽ bị ẩn đi, tuy nhiên nó vẫn chiến không gian hiển thị. Nói cách khác khi sử dụng giá trị hidden, phần tử này sẽ không làm thay đổi layout.

Để thấy rõ hơn sự khác biệt giữa display: none và visibility: hidden, Chúng ta cùng test thử demo dưới đây nhé:

Kết luận

Hy vọng sau bài viết này các bạn có thể hiểu hơn về sự khác biệt giữa display: none và visibility: hidden.

Chúc các bạn học tốt. Chúng ta sẽ gặp lại nhau trong các bài viết sắp tới nhé ^^.