Ocultar elementos sin sacrificar el espacio de la página

Al intentar eliminar elementos de la visualización visual manteniendo su presencia en el DOM, un enfoque común implica el uso de la visibilidad: atributo oculto. Sin embargo, este método puede provocar una ocupación persistente del espacio por parte de los elementos ocultos.

Para ocultar elementos de manera efectiva sin dejar rastros visibles, considere utilizar la propiedad display:none junto con display:block para mostrarlos.

Ocultar con visualización:ninguna

Implementar visualización:ninguna en el elemento que desea oscuro:

element {
  display: none;
}

Esta acción hará que el elemento sea visualmente imperceptible, ocultándolo efectivamente de la vista.

Mostrando con display:block

Para hacer un elemento ya oculto reaparece el elemento, asígnale display:block:

element {
  display: block;
}

Este método le permite ocultar y revelar elementos sin afectar su presencia en el DOM o su espacio asignado en la página.