Sự khác biệt giữ display:none và visibility:hidden

Thông thường, để ẩn hiện những thứ không mong muốn trong một website đối với CSS thì thông thường chúng ta sẽ sử dụng hai thuộc tính đó là display: none, và visibility: hidden. Khá chắc rằng nhiều người khi mới bước vào học thiết kế website, thì mười người có tới bảy đến tám người chẳng ai biết cái hai thuộc tính này khác nhau ở chỗ nào. Do đó tiện đây mình lập ra bài viết ngắn này, giúp các bạn hiểu được nó khác biết nhau ở chỗ nào.

Sự khác biệt giữ display:none và visibility:hidden

Để hiểu rõ được sử khác biệt của chúng đầu tiên xin mình giới thiệu sơ qua về cách làm ẩn hiện đối tượng sử dụng hai thuộc tính này.

Đối với display: none, thông thường nhất chúng ta sử dụng hai thuộc tính cơ bản sau:

• display: block (Hiện)
• display: none (Ẩn)

Đối với visibility: hidden, thông thường cũng sử dụng hai thuộc tính:

• visibility: visible (Hiện)
• visibility: hidden (Ân)

Bây giờ để nhìn vào là biết ngay thì mình sẽ tạo ra ba đối tượng, mình sẽ sử dụng hai thuộc tính này cho vào đối tượng ở giữa và bạn sẽ nhận ra được ngay nó khác biệt nhau ở chỗ nào. Mỗi đối tượng dưới đây mà mình tạo chúng sẽ có màu sắc theo thứ tự đỏ, xanh lá, xanh biển.

Đối với display: none

đối tượng thứ hai (xanh lá) đã bị ẩn đi còn một thứ gì hết, ý mình là không gian mà nó chiếm dụng của đối tượng thứ hai như bạn thấy nó đã mất đi chứ không chỉ là phần chữ viết trong nó.

Đối với visibility: hidden

khác với display: none thuộc tính này làm cho đối tượng thứ hai (xanh lá) chỉ ẩn đi phần chữ viết, nhưng không gian mà đối tượng chiếm dụng vẫn sẽ còn đó, không hề bị mất đi.

Lời kết

Qua các ví dụ trên thì mình đã giải thích xong sử khác biệt giữa hai thuộc tính này, mong rằng sau khi mọi người hiểu được sự khác biệt nho nhỏ này, các bạn sẽ biết phải sử dụng nó cho các trường hợp nào trên các website của riêng mỗi người.