Préserver la mise en page tout en masquant les éléments

Lorsque vous souhaitez masquer des éléments HTML sans affecter la présentation visuelle, l'utilisation de la visibilité : caché peut conduire à des résultats indésirables. Tout en masquant l'élément, il continue d'occuper le même espace sur la page.

Désactivation de l'affichage

Pour surmonter ce défi, il est recommandé d'utiliser la propriété display. En définissant l'affichage de l'élément sur aucun, il disparaît effectivement de la représentation visuelle, comme s'il avait été entièrement supprimé du DOM.

Considérez l'exemple suivant :

Initialement, l'élément div est affiché normalement. Pour le masquer :
#element {
  display: none;
}
Lorsque display: none est appliqué, l'élément devient visuellement absent, libérant l'espace qu'il occupait auparavant. Pour restaurer la visibilité de l'élément :
#element {
  display: block;  
}
Avantages de l'utilisation de display : aucun
Préserve la mise en page de la page
Maintient la position de l'élément dans le code HTML
Permet à l'élément d'être à nouveau affiché facilement en définissant display: block