Quels moyens peut-on utiliser pour masquer un élément HTML sur une page web?

• display: none; - l'élément est complètement supprimé du flux du document, ne prend pas de place et les événements ne sont pas traités. La méthode la "plus forte" pour cacher.
• visibility: hidden; - l'élément reste dans le flux du document, conserve sa place, mais n'est pas visible. Les événements de souris et de clavier ne sont pas traités.
• opacity: 0; - l'élément reste dans le flux du document, conserve sa place, n'est pas visible. Les événements de souris et de clavier sont traités (il est possible de cliquer, de survoler, etc.). L'élément devient simplement complètement transparent.
• position: absolute; et définir des coordonnées hors de la zone visible (par exemple, left: -9999px;). L'élément est retiré du flux normal, mais est toujours présent sur la page et peut influencer le défilement. Les événements sont traités.
• width: 0; height: 0; overflow: hidden; - l'élément reste dans le flux, mais ses dimensions sont annulées. Les événements peuvent être traités si leur zone tombe dans la partie visible d'un autre élément.
• font-size: 0; et line-height: 0; (pour cacher le contenu textuel). Conserve l'élément, mais rend son texte invisible.
• Utilisation du pseudo-élément :empty (pas pour tous les éléments et cas). Cacher le contenu si l'élément est vide.

Le choix de la méthode dépend du comportement requis : si l'on souhaite que l'élément occupe de l'espace, traite des événements ou soit complètement supprimé du flux.