Свойство visibility только сообщает браузеру, показывать элемент или нет.Он либо видимый (visible - вы можете видеть его), либо невидимый (hidden - вы его не видите).
Свойство display сообщает браузеру как рисовать и показывать элемент, если он вообще есть - должен ли он отображаться как элемент inline (т. е. он течет вместе с текстом и другими встроенными элементами) или как элемент block -уровня (т. е. он имеет свойства высоты и ширины, которыеВы можете установить, он плавающий и т. д.), или inline-block (то есть он действует как блок-блок, но вместо этого встроен в строку) и некоторые другие (list-item, table, table-row, table-cell, flex и т. Д.).
Когда вы устанавливаете элемент на display: block, но также задаете visibility: hidden, браузер по-прежнему обрабатывает его как элемент блока, за исключением того, что вы просто невидеть это.Это похоже на то, как вы кладете красную коробку поверх невидимой коробки: красная коробка выглядит так, как будто она парит в воздухе, когда на самом деле она находится над физической коробкой, которую вы не видите.
Другими словами, это означает, что элементы с display, который не является none, будут по-прежнему влиять на поток элементов на странице, независимо от того, являются ли они видимыми или нет.Коробки, окружающие элемент с display: none, будут вести себя так, как будто этого элемента никогда не было (хотя он остается в DOM).