Я понимаю, что использование visibility:hidden
сохраняет пространство на странице, а display:none
- нет, однако, когда имеет смысл «сохранять» пространство? Это может оставить неудобную пустую область / зияющую дыру на странице.
Дисплей: нет - Динамические страницы / разделы: обычно используется для больших динамических областей на странице, чтобы не оставлять неудобных пустых областей, из-за которых страница выглядит плохо. При отображении он будет перемещать другие части страницы и отображать себя на той странице, где он должен быть, изменяя положение и расположение окружающих элементов страницы по мере необходимости / задуманного.
Видимость: скрыта - Статические страницы / разделы: используйте это для меньших частей, где перемещение окружающих элементов, когда эта часть становится видимой, является нежелательный, то есть: отображение / скрытие значка в разделе страницы. Использование display: none не могло / не могло бы заставить себя войти в раздел страницы и переместить окружающие его элементы, чтобы освободить место для себя, что привело бы к перемещению по странице. Использование видимости: hidden в этом случае скроет / покажет элемент «значок» без какого-либо перемещения остальных окружающих элементов страницы, поскольку это пространство было «сохранено / зарезервировано» для него, поэтому оно просто «включает / выключает» "без видимого движения.
Поскольку это использование находится на небольшом участке в противном случае «статического» раздела страницы, пустая «дыра» на странице, оставшаяся там из-за «сохраненного / зарезервированного» пространства, не заметна, когда она скрыта, потому что «макет» страницы не зависят от небольшого «сохраненного / зарезервированного» места для значка. Это всего лишь маленький кусочек в большей статической области.
Надеюсь, это поможет решить, когда и где использовать эти два, казалось бы, похожих атрибута.