[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"question-osnovy-css-v-chem-raznitsa-mezhdu-display-none-i-visibility-hidden":3},{"id":4,"slug":5,"topicId":6,"topicSlug":7,"topicName":8,"topicEmoji":9,"question":10,"answer":11,"codeLang":12,"codeSrc":12,"important":12,"commonMistakes":12,"modernUsage":12,"difficulty":13,"tags":14,"related":19,"progress":20,"seo":21},1032,"v-chem-raznitsa-mezhdu-display-none-i-visibility-hidden",32,"osnovy-css","Основы CSS","🎨","В чем разница между display: none и visibility: hidden?","Оба свойства скрывают элемент, но делают это по-разному.\n\n| Характеристика | `display: none` | `visibility: hidden` |\n|----------------|-----------------|---------------------|\n| Элемент виден | Нет | Нет |\n| Занимает место в раскладке | Нет — элемент полностью исключён из потока | Да — пустое место остаётся |\n| Дочерние элементы | Скрыты и не могут быть показаны отдельно | Могут быть показаны через `visibility: visible` |\n| Анимация\u002Ftransition | Нельзя анимировать (нет промежуточных состояний) | Можно анимировать |\n| Доступность (screen readers) | Элемент игнорируется | Элемент игнорируется |\n| События (клик) | Не срабатывают | Не срабатывают |\n\n### Третий вариант: opacity: 0\n\n```css\n.hidden-opacity {\n  opacity: 0;\n}\n```\n\nЭлемент невидим, но занимает место и реагирует на клики. Полезен для анимаций появления\u002Fисчезновения.\n\n> **На собеседовании:** главное — объяснить, что `display: none` убирает элемент из потока, а `visibility: hidden` оставляет пустое место. Дополнительный плюс — упомянуть `opacity: 0` как третий вариант.","","junior",[15,16,17,18],"отображение","css","раскладка","свойства",[],null,{"title":22,"description":23,"ogTitle":24,"ogDescription":25,"keywords":26,"schemaAnswer":34,"featuredSnippetReady":35},"display: none vs visibility: hidden — Gymterview","Разница display: none и visibility: hidden: поток документа, дочерние элементы, анимация, opacity: 0 как третий вариант скрытия.","display: none vs visibility: hidden vs opacity: 0 — Gymterview","Сравнение способов скрытия элемента: display: none, visibility: hidden, opacity: 0. Поток, анимация, события.",[27,28,29,30,31,32,33],"display none","visibility hidden","opacity 0","скрыть элемент CSS","поток документа","анимация CSS","собеседование","display: none — элемент полностью исключён из потока, не занимает места, дочерние элементы нельзя показать отдельно, нельзя анимировать. visibility: hidden — элемент скрыт, но место остаётся, дочерние могут быть показаны через visibility: visible, можно анимировать. Третий вариант — opacity: 0: элемент невидим, занимает место и реагирует на клики.",true]