Khác biệt giữa display: none và visibility: hidden trong CSS

So sánh 2 cách ẩn phần tử

1. display: none

Phần tử bị loại hoàn toàn khỏi luồng hiển thị (layout). Không chiếm diện tích, không nhận sự kiện, không thể truy cập bằng tab.

<style>
  h3 { display: none; }
</style>
<h2>Tiêu đề hiển thị</h2>
<h3>Tiêu đề ẩn (display: none)</h3>
<p>Tiêu đề ẩn không chiếm không gian.</p>

2. visibility: hidden

Phần tử vô hình nhưng vẫn chiếm diện tích trong layout. Vẫn ảnh hưởng đến bố cục các phần tử xung quanh.

<style>
  h3 { visibility: hidden; }
</style>
<h2>Tiêu đề hiển thị</h2>
<h3>Tiêu đề ẩn (visibility: hidden)</h3>
<p>Tiêu đề ẩn vẫn chiếm không gian.</p>

Bảng so sánh nhanh