Question Quelle est la différence entre visibilité: hidden et display: none?


Les règles CSS visibility:hidden et display:none les deux ont pour résultat que l'élément n'est pas visible. Sont ces synonymes?


926
2017-09-25 12:37


origine


Réponses:


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 via le dom). Il n'y aura pas d'espace alloué pour cela entre les autres balises.

visibility:hidden signifie que contrairement display:none, la balise n'est pas visible, mais 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

Remplacer [style-tag-value] avec display:none résulte en:

test |   | test

Remplacer [style-tag-value] avec visibility:hidden résulte en:

test |                        | test

1179
2017-09-25 12:40



Ce ne sont pas des synonymes.

display:none supprime l'élément du flux normal de la page, permettant aux autres éléments de se remplir.

visibility:hidden laisse l'élément dans le flux normal de la page tel qu'il occupe encore l'espace.

Imaginez que vous êtes en ligne pour un tour dans un parc d'attractions et quelqu'un dans la ligne devient si chahuteur que la sécurité les arrache de la ligne. Tout le monde en ligne avancera alors d'une position pour remplir l'emplacement maintenant vide. C'est comme display:none.

Comparez cela avec la situation similaire, mais que quelqu'un en face de vous met une cape d'invisibilité. En regardant la ligne, on dirait qu'il y a un espace vide, mais les gens ne peuvent pas vraiment remplir cet espace vide parce que quelqu'un est toujours là. C'est comme visibility:hidden.


184
2017-09-25 13:50



Une chose qui mérite d'être ajoutée, même si cela n'a pas été demandé, est qu'il existe une troisième option pour rendre l'objet complètement transparent. Considérer:

1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.

Dans ce cas, vous obtenez:

1st link.
2nd        link.
3rd        link.

La différence entre 1 et 2 a déjà été soulignée (à savoir, 2 prend encore de la place). Cependant, il y a une différence entre 2 et 3: dans le cas 3, la souris passera toujours à la main en survolant le lien, et l'utilisateur peut toujours cliquer sur le lien, et les événements Javascript continueront à tourner sur le lien. C'est habituellement ne pas le comportement que vous voulez. Le comportement lors de la sélection du texte peut également varier d'un navigateur à l'autre.


82
2017-10-02 21:27



display:none supprime l'élément du flux de disposition.

visibility:hidden le cache mais laisse l'espace.


74
2017-09-25 12:39



Il y a une grande différence quand il s'agit de nœuds enfants. Par exemple: Si vous avez une div parent et une div enfant imbriquée. Donc si vous écrivez comme ceci:

<div id="parent" style="display:none;">
    <div id="child" style="display:block;"></div>
</div>

Dans ce cas, aucun des divs ne sera visible. Mais si vous écrivez comme ceci:

<div id="parent" style="visibility:hidden;">
     <div id="child" style="visibility:visible;"></div>
</div>

Alors le div enfant sera visible alors que le div parent ne sera pas montré.


53
2018-01-14 09:39



Ce ne sont pas des synonymes - display: none supprime l'élément du flux de la page et le reste de la page s'écoule comme s'il n'était pas là.

visibility: hidden cache l'élément de la vue mais pas le flux de la page, en laissant de la place sur la page.


17
2017-09-25 12:41



display: none supprime entièrement l'élément de la page et la page est construite comme si l'élément n'existait pas du tout.

Visibility: hidden laisse l'espace dans le flux de document même si vous ne pouvez plus le voir.

Cela peut ou non faire une grande différence en fonction de ce que vous faites.


14
2017-09-25 12:40



Avec visibility:hidden l'objet occupe toujours la hauteur verticale sur la page. Avec display:noneil est complètement enlevé. Si vous avez du texte sous une image et que vous faites display:none, ce texte se déplacera pour remplir l'espace où se trouvait l'image. Si vous faites de la visibilité: caché, le texte restera au même endroit.


11
2017-09-25 12:41



display:none va cacher l'élément et s'effondrer l'espace était en train de prendre, alors que visibility:hidden va cacher l'élément et préserver l'espace des éléments. display: none affecte également certaines des propriétés disponibles depuis javascript dans les anciennes versions d'IE et de Safari.


10
2017-09-25 12:41



Si la propriété de visibilité est définie sur "hidden", le navigateur prendra toujours de la place sur la page pour le contenu même s'il est invisible.
Mais quand nous définissons un objet à "display:none", le navigateur n'alloue pas d'espace sur la page pour son contenu.

Exemple:

<div style="display:none">
Content not display on screen and even space not taken.
</div>

<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>

Voir les détails


6
2017-12-27 05:25



En plus de toutes les autres réponses, il y a une différence importante pour IE8: Si vous utilisez display:none et essayez d'obtenir la largeur ou la hauteur de l'élément, IE8 renvoie 0 (tandis que les autres navigateurs retourneront les tailles réelles). IE8 renvoie la largeur ou la hauteur correcte uniquement pour visibility:hidden.


6
2018-04-01 17:42