Thuộc tính visibility
Thuộc tính visibility
chỉ ra một phần tử là ẩn hay hiện thị trên trang. Các giá trị nó nhận có thể là: visible
hidden
collapse
Ẩn đi một phần tử bạn có thể dùng display: none
hoặc visibility: hidden
visibility: collapse
tuy nhiên lưu ý có sự khác nhau: visibility:hidden
ẩn đi phần tử,
nhưng phần tử vẫn chiếm chỗ trong trang hiện thị.
<style> div.hidden { visibility: hidden; } </style> <h2>Ví dụ visibility:hidden</h2> <div class="hidden"> Đoạn văn này bị ẩn đi. </div> <p> Phần từ trước bị ẩn đi, nhưng chỗ nó chiểm vẫn còn. </p>
Ví dụ visibility:hidden
Phần từ trước bị ẩn đi, nhưng chỗ nó chiểm vẫn còn.
Ví dụ trên nếu sử dụng display: none
thì phần tử ẩn đi và chõ nó chiếm bị thu hồi.
<style> div.hidden1 { display: none; } </style> <div class="card p-1"> <h2>Ví dụ visibility:hidden</h2> <div class="hidden1"> Đoạn văn này bị ẩn đi. </div> <p> Phần từ trước bị ẩn đi, nhưng chỗ nó chiểm vẫn còn. </p> </div>
Ví dụ visibility:hidden
Phần từ trước bị ẩn đi, nhưng chỗ nó chiểm vẫn còn.