Comment masquer des éléments sans les laisser prendre de la place sur la page?

Question

J'utilise "visibilité: masqué" pour masquer certains éléments, mais ils occupent toujours de l'espace sur la page lorsqu'ils sont masqués.

Comment puis-je les faire disparaître totalement visuellement, comme s'ils ne se trouvaient pas du tout dans le DOM (mais sans les supprimer réellement)?

Answer 1

Essayez de définir display:none pour le masquer et définissez display:block pour le montrer.

Answer 2

utilisez plutôt le style comme

 <div style="display:none;"></div>
 

Answer 3

Pour utiliser display:none est une bonne option pour supprimer un élément, MAIS il sera également supprimée pour les lecteurs d'écran. Il y a aussi des discussions si il les effets de SEO. Il y a un bon, un très court article sur le sujet sur Une Liste à Part

Si vraiment vous voulez juste cacher et de ne pas supprimer un élément, une meilleure utilisation:

div {
  position: absolute; 
  left: -999em;
}

Comme cela, il peut aussi être lu par les lecteurs d'écran.

Le seul inconvénient de cette méthode est que cette DIV est effectivement rendus, et il peut influer sur la performance, en particulier sur les téléphones mobiles.

Answer 4

Au lieu d'utiliser visibility: hidden; utilisez display: none; . La première option va se cacher mais prend toujours de la place et la deuxième option va se cacher et ne prend aucune place.

Answer 5

display:none à masquer et définir display:block à afficher.