Liên hệ
Ủng hộ, đăng ký theo dõi kênh

Thuộc tính visibility trong CSS

Thiết lập ẩn hiện phần tử HTML bằng cách sử dụng thuộc tính CSS visibility

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

Đoạn văn này bị ẩn đi.

Phần từ trước bị ẩn đi, nhưng chỗ nó chiểm vẫn còn.

Vui lòng đăng ký ủng hộ kênh