Las reglas CSS visibility:hidden
y display:none
hacen que el elemento no sea visible. ¿Son sinónimos?
display:none
significa que la etiqueta en cuestión no aparecerá en la página en absoluto (aunque todavía se puede interactuar con ella a través del dom). No habrá espacio asignado para ella entre las demás etiquetas.
Visibility:hiddensignifica que, a diferencia de
display:none`, la etiqueta no es visible, pero se le asigna un espacio en la página. La etiqueta se renderiza, pero no se ve en la página.
Por ejemplo:
test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test
Sustituir [style-tag-value]
por display:none
da como resultado:
test | | test
Sustituir [style-tag-value]
por visibility:hidden
da como resultado:
test | | test
display: none
elimina el elemento de la página por completo, y la página se construye como si el elemento no estuviera en absoluto.
La opción Visibility: hidden
deja el espacio en el flujo del documento aunque ya no se pueda ver.
Esto puede o no hacer una gran diferencia dependiendo de lo que estés haciendo.