Les règles CSS visibility:hidden
et display:none
ont toutes deux pour effet de rendre l'élément invisible. S'agit-il de synonymes ?
display:none
signifie que la balise en question n'apparaîtra pas du tout sur la page (bien que vous puissiez toujours interagir avec elle par le biais du dom). Il n'y aura pas d'espace qui lui sera alloué entre les autres balises.
visibility:hidden
signifie que, contrairement à display:none
, la balise n'est pas visible, mais qu'un espace lui est alloué sur la page. La balise est rendue, elle n'est simplement pas visible sur la page.
Par exemple :
test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test
En remplaçant [style-tag-value]
par display:none
, on obtient :
test | | test
Le remplacement de "[valeur du style]" par "visibilité:caché" donne :
test | | test
display : none
supprime l'élément de la page entièrement, et la page est construite comme si l'élément n'était pas là du tout.
Visibility : hidden
laisse l'espace dans le flux du document même si vous ne pouvez plus le voir.
Cela peut ou non faire une grande différence selon ce que vous faites.