Diferencia entre display:none y visibility:hidden

Noviembre 2016

Los dos atributos CSS display:none y visibility:hidden permiten ocultar un elemento en el navegador.

Sin embargo, existe una pequeña diferencia:
  • visibility: hidden oculta el elemento, pero sigue conservando el espacio que ocupaba, los elementos adyacentes conservan su ubicación.
  • display:none quita el elemento definitivamente. El espacio que ocupaba, según sea el caso, es ocupado por los elementos adyacentes como si el elemento ya no existiera.


Consulta también :
El documento «Diferencia entre display:none y visibility:hidden» de CCM (es.ccm.net) se encuentra disponible bajo una licencia Creative Commons. Puedes copiarlo o modificarlo siempre y cuando respetes las condiciones de dicha licencia y des crédito a CCM.