🤔 Какое свойство позволяет вам спрятать элемент, но сохранить занимаемое им пространство на странице?

Это свойство называется visibility. Это свойство может принимать несколько значений, но основными для скрытия элемента являются visible и hidden.

.hidden-element {
    visibility: hidden;
}

🟠visible
По умолчанию, элементы имеют значение visibility: visible;, что означает, что они видимы на странице.
🟠hidden
Когда элементу назначается значение visibility: hidden;, он становится невидимым, но продолжает занимать то же пространство в макете страницы, что и когда он был видимым.

В этом примере, второй <div> с классом hidden-element скрыт, но продолжает занимать место на странице. Третий <div> расположен после него, как если бы скрытый элемент был видимым.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .hidden-element {
            visibility: hidden;
        }
        .visible-element {
            background-color: lightblue;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="visible-element">Этот элемент видим.</div>
    <div class="hidden-element">Этот элемент скрыт, но сохраняет место.</div>
    <div class="visible-element">Этот элемент тоже видим и расположен после скрытого элемента.</div>
</body>
</html>

🚩Зачем это нужно?

🟠Сохранение макета
Когда важно сохранить исходный макет и расположение элементов.
🟠Динамическое управление видимостью
Когда требуется временно скрыть элемент и затем снова сделать его видимым, не изменяя при этом расположение других элементов на странице.

🚩Альтернативы

🟠display: none;
Это свойство полностью удаляет элемент из документа, как если бы его не было, освобождая занимаемое им место.
🟠opacity: 0;
Это свойство делает элемент полностью прозрачным, но элемент остается интерактивным и занимает место.

Ставь 👍 и забирай 📚 Базу знаний