Справочник CSS

visibility: скрытие без изменения раскладки

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

Рабочий пример

.hint { visibility: hidden; }
.field:focus-within .hint { visibility: visible; }

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

Когда применять

visibility подходит, когда размеры интерфейса не должны прыгать при показе подсказки. Для полностью отсутствующего блока чаще нужен hidden или display: none.

Проверь пример самостоятельно: измени исходные данные, убери одну строку и сравни результат. Такой короткий эксперимент помогает увидеть роль каждого свойства или метода и не превращает обучение в механическое копирование.

Частые ошибки

• Ожидать освобождения места
• Скрывать только через opacity и оставлять невидимые кнопки
• Использовать collapse вне таблиц без проверки