Скрытие элементов

Последнее значение display, которое мы разберём, — none. Элемент с display: none вообще не отображается и не занимает места: следующие за ним элементы сдвигаются вверх, как будто его нет. В HTML он остаётся, просто браузер его не показывает.

Сравните с opacity: 0, которое вы знаете из урока о цветах. Оно делает элемент полностью прозрачным, но элемент всё равно занимает своё место, и на странице остаётся пустой промежуток.

Скрытие полезно для содержимого, которое должно появляться только в определённый момент: меню, которое открывается при наведении, всплывающей подсказки или ответа на вопрос викторины. Такой элемент мы скрываем с помощью display: none, а показываем снова в правиле с псевдоклассом :hover, который вы знаете из урока о селекторах.

В раздел «Физиология» страницы мы добавили короткую викторину. Давайте скроем её ответ, пока читатель не наведёт на викторину указатель мыши.