Thuộc tính visibility trong CSS

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ụ 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>