Conservar el diseño de página mientras se ocultan elementos

Cuando se pretende ocultar elementos HTML sin afectar el diseño visual, el uso de visibilidad: oculto puede conducir a resultados no deseados. Aunque oculta el elemento a la vista, continúa ocupando el mismo espacio en la página.

Deshabilitar la visualización

Para superar este desafío, se recomienda emplear la propiedad de visualización. Al configurar la visualización del elemento en ninguno, efectivamente desaparece de la representación visual, como si se hubiera eliminado por completo del DOM.

Considere el siguiente ejemplo:

Al principio, el elemento div se muestra normalmente. Para ocultarlo:
#element {
  display: none;
}
Cuando se aplica display: none, el elemento queda visualmente ausente, liberando el espacio que ocupaba anteriormente. Para restaurar la visibilidad del elemento:
#element {
  display: block;  
}
Beneficios de usar display: ninguno
Conserva el diseño de la página
Mantiene la posición del elemento en el código HTML
Permite que el elemento se muestre fácilmente nuevamente configurando display: block