Невидимые элементы Причина пустого пространства

Question

У меня есть скрытый элемент, который скрыт с помощью

visibility:hidden;

, но она по-прежнему занимает место на странице, где было бы, если это было видно. Это заставляет некоторые другие элементы перемещаться вниз по странице немного дальше, и это выглядит странно. Причина, по которой она скрыта, заключается в том, что она будет отображаться только на мобильных устройствах. Есть ли способ удалить это пустое пространство?

Answer 1

Элемент с visibility: hidden по-прежнему занимает пробел на странице. Используйте display: none, если вы хотите удалить элемент из потока макета. Хотя вы все еще можете взаимодействовать с ним в DOM, display:none позволит другим элементам занимать пространство, которое будет выделено для него.

Также обратите внимание, что не visibility: hidden или display: none ответить на события.

Answer 2

, не видя код ... довольно трудно сделать ... но по умолчанию будет display:none

Answer 3

visibility:hidden; 

просто делает элемент скрытый, но не удаляет его из макета

использование

display:none; 

, который удаляет его из макета.

Answer 4

Это потому, что visibility: hidden; только скрывает элемент и эквивалентно его прозрачности на 100%.

display: none; однако, скрыть элемент как visibility: hidden;, но идет дополнительный шаг и эффективно удаляет его из страницы (это не фактически удалить его, он просто дает этот эффект).