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.

Đăng ký theo dõi ủng hộ kênh