← Назад ко всем вопросам

Display: None и Visibility: Hidden

1️⃣ Как кратко ответить

display: none полностью удаляет элемент из потока документа, не занимая места на странице, в то время как visibility: hidden делает элемент невидимым, но оставляет его место в потоке документа.

2️⃣ Подробное объяснение темы

В веб-разработке часто возникает необходимость скрыть элементы на странице. Для этого используются CSS-свойства display: none и visibility: hidden. Хотя оба свойства делают элемент невидимым для пользователя, они работают по-разному и имеют разные последствия для структуры страницы.

Display: None

Когда элементу применяется display: none, он полностью удаляется из потока документа. Это означает, что элемент не только не виден, но и не занимает места на странице. Другие элементы ведут себя так, как будто этого элемента никогда не существовало.

Пример:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div>Элемент 1</div>
    <div class="hidden">Элемент 2 (скрыт)</div>
    <div>Элемент 3</div>
</body>
</html>
  • В этом примере Элемент 2 не будет отображаться на странице и не будет занимать место. Элемент 3 будет перемещен на место Элемента 2.

Visibility: Hidden

Свойство visibility: hidden делает элемент невидимым, но оставляет его в потоке документа. Это значит, что элемент не отображается, но продолжает занимать место, как если бы он был видимым.

Пример:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .invisible {
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div>Элемент 1</div>
    <div class="invisible">Элемент 2 (невидим)</div>
    <div>Элемент 3</div>
</body>
</html>
  • В этом примере Элемент 2 не будет виден, но его место на странице останется, и Элемент 3 не будет перемещен.

Применение и различия

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

  • visibility: hidden используется, когда элемент должен оставаться на своем месте, но быть невидимым. Это может быть полезно для анимаций или когда нужно сохранить структуру страницы, но временно скрыть элемент.

Влияние на доступность

  • Элементы с display: none не будут доступны для скринридеров, так как они полностью удалены из DOM.
  • Элементы с visibility: hidden остаются в DOM и могут быть доступны для скринридеров, что может быть полезно в некоторых случаях, но также может вызвать путаницу, если элемент не должен быть доступен.

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

Тема: CSS
Стадия: Tech

🔒 Подпишись на бусти автора и стань Алигатором, чтобы получить полный доступ к функционалу сайта и отслеживать свой прогресс!

Твои заметки