¿Cuál es la diferencia entre display: none; y visibility: hidden;?

Tanto display: none; como visibility: hidden; son propiedades CSS que se utilizan para ocultar elementos en una página web, pero tienen diferencias cruciales en cómo afectan al diseño (layout) y a la interacción con el elemento:

display: none;

• Eliminación del flujo: Cuando aplicas display: none; a un elemento, este se elimina por completo del flujo normal del documento. Es como si el elemento no existiera en la página:
  • No ocupa espacio: El espacio que el elemento habría ocupado se colapsa, y los elementos circundantes se reajustan para llenar ese vacío.
  • Recálculo del layout: El navegador tiene que recalcular el diseño de la página.
• Interacción y accesibilidad:
  • El elemento no es interactivo (no se puede hacer clic sobre él, no responde a eventos del ratón, etc.).
  • Generalmente, no es accesible para tecnologías de asistencia (como lectores de pantalla), ya que se considera que no forma parte de la estructura visible de la página.
  • Los scripts no suelen encontrarlo con métodos que buscan elementos visibles.
• Recursos: No se descargan recursos asociados como imágenes si el elemento ya tiene display: none al cargar la página.
• Animaciones/Transiciones: Las transiciones y animaciones CSS generalmente no se aplican directamente a la propiedad display.

visibility: hidden;

• Ocultación visual, pero conserva el espacio: Cuando aplicas visibility: hidden;, el elemento se vuelve invisible, pero sigue ocupando su espacio original en el diseño de la página. Es decir, se crea un «hueco» o espacio vacío donde estaría el elemento si fuera visible.
  • No afecta al layout de otros elementos: Los elementos circundantes no se mueven ni se reajustan.
• Interacción y accesibilidad:
  • El elemento no es interactivo (no se puede hacer clic, etc.), aunque ocupe espacio.
  • Sigue siendo parte del DOM y puede ser accedido por JavaScript. Su efecto en la accesibilidad es complejo; aunque invisible, su presencia en el layout podría ser confusa.
• Recursos: Los recursos asociados (como imágenes) generalmente se descargan.
• Animaciones/Transiciones: La propiedad visibility sí puede ser animada o transicionada (por ejemplo, para efectos de aparición/desaparición graduales si se combina con opacity).
• Herencia particular: Si un elemento padre tiene visibility: hidden;, sus elementos hijos también estarán ocultos. Sin embargo, un elemento hijo puede anular esta herencia estableciendo visibility: visible;, haciéndose visible dentro del espacio que ocupa su padre oculto.

En resumen:

• Usa display: none; cuando quieras eliminar completamente el elemento del diseño y que no ocupe ningún espacio (ideal para menús desplegables que aparecen y desaparecen, contenido condicional, etc.).
• Usa visibility: hidden; cuando necesites ocultar un elemento pero mantener el espacio que ocupaba en el layout, o cuando quieras que sus hijos puedan anular la invisibilidad, o para ciertos efectos de transición.

La elección entre uno y otro dependerá del efecto específico que quieras lograr en el diseño y la funcionalidad de tu página.