What is the difference between visibility hidden and display none

Question

The CSS rules visibility hidden and display none both result in the element not being visible  Are these synonyms

User · Answer

visibility hidden will keep the element in the page and occupies that space but does not show to the user   display none will not be available in the page and does not occupy any space

User · Answer

There are a lot of detailed answers here  but I thought I should add this to address accessibility since there are implications   display  none  and visibility  hidden  may not be read by all screen reader software  Keep in mind what visually-impaired users will experience   The question also asks about synonyms  text-indent  -9999px  is one other that is roughly equivalent  The important difference with text-indent is that it will often be read by screen readers  It can be a bit of a bad experience as users can still tab to the link   For accessibility  what I see used today is a combination of styles to hide an element while being visible to screen readers       clip  rect 1px  1px  1px  1px     clip-path  inset 50      height  1px    width  1px    margin  -1px    overflow  hidden    padding  0    position  absolute      A great practice is to create a  Skip to content  link to the anchor of the main body of content  Visually-impaired users probably don t want to listen to your full navigation tree on every single page  Make the link visually hidden  Users can just hit tab to access the link   For more on accessibility and hidden content  see    https   webaim org techniques css invisiblecontent  https   webaim org techniques skipnav

User · Answer

visibility hidden preserves the space  display none doesn t

User · Answer

display  none removes the element from the page entirely  and the page is built as though the element were not there at all     Visibility  hidden leaves the space in the document flow even though you can no longer see it    This may or may not make a big difference depending on what you are doing

User · Answer

There is a big difference when it comes to child nodes  For example  If you have a parent div and a nested child div  So if you write like this    lt div id  parent  style  display none   gt       lt div id  child  style  display block   gt  lt  div gt   lt  div gt    In this case none of the divs will be visible  But if you write like this    lt div id  parent  style  visibility hidden   gt       lt div id  child  style  visibility visible   gt  lt  div gt   lt  div gt    Then the child div will be visible whereas the parent div will not be shown

User · Answer

One thing worth adding  though it wasn t asked  is that there is a third option of making the object completely transparent   Consider    x000D   x000D  1st  lt a href  http   example com  style  display  none   gt unseen lt  a gt  link  lt br   gt  x000D  2nd  lt a href  http   example com  style  visibility  hidden   gt unseen lt  a gt  link  lt br   gt  x000D  3rd  lt a href  http   example com  style  opacity  0   gt unseen lt  a gt  link  x000D   x000D   x000D     Be sure to click  Run code snippet  button above to see the result    The difference between 1 and 2 has already been pointed out  namely  2 still takes up space    However  there is a difference between 2 and 3  in case 3  the mouse will still switch to the hand when hovering over the link  and the user can still click on the link  and Javascript events will still fire on the link  This is usually not the behavior you want  but maybe sometimes it is     Another difference is if you select the text  then copy paste as plain text  you get the following   1st link  2nd  link  3rd unseen link    In case 3 the text does get copied  Maybe this would be useful for some type of watermarking  or if you wanted to hide a copyright notice that would show up if a carelessly user copy pasted your content

User · Answer

display  none     It will not be available on the page and does not occupy any space    visibility  hidden     it hides an element  but it will still take up the same space as before  The element will be hidden  but still  affect the layout   visibility  hidden preserve the space  whereas display  none doesn t preserve the space   Display None Example https   www w3schools com css tryit asp filename trycss display none  Visibility Hidden Example   https   www w3schools com cssref tryit asp filename trycss visibility

User · Answer

display none  will neither display the element nor will it allot space for the element on the page whereas visibility hidden  will not display the element on the page but will allot space on the page   We can access the element in DOM in both cases   To understand it in a better way please look at the following code  display none vs visibility hidden

User · Answer

display none removes the element from the layout flow   visibility hidden hides it but leaves the space

User · Answer

display none means that the tag in question will not appear on the page at all  although you can still interact with it through the dom    There will be no space allocated for it between the other tags     visibility hidden means that unlike display none  the tag is not visible  but space is allocated for it on the page  The tag is rendered  it just isn t seen on the page   For example   test    lt span style   style-tag-value   gt Appropriate style in this tag lt  span gt    test   Replacing  style-tag-value  with display none results in   test       test   Replacing  style-tag-value  with visibility hidden results in   test                                                  test

User · Answer

display none will hide the element and collapse the space is was taking up  whereas visibility hidden will hide the element and preserve the elements space  display none also effects some of the properties available from javascript in older versions of IE and Safari

User · Answer

If visibility property set to  hidden   the browser will still take space  on the page for the content even though it s invisible  But when we set an object to  display none   the browser does not allocate space on the page for its content   Example    lt div style  display none  gt  Content not display on screen and even space not taken   lt  div gt    lt div style  visibility hidden  gt  Content not display on screen but it will take space on screen   lt  div gt    View details

User · Answer

The difference goes beyond style and is reflected in how the elements behave when manipulated with JavaScript   Effects and side effects of display  none    the target element is taken out of the document flow  doesn t affect layout of other elements   all descendants are affected  are not displayed either and cannot    snap out    of this inheritance   measurements cannot be made for the target element nor for its descendants     they are not rendered at all  thus their clientWidth  clientHeight  offsetWidth  offsetHeight  scrollWidth  scrollHeight  getBoundingClientRect    getComputedStyle    all return 0s    Effects and side-effects of visibility  hidden    the target element is hidden from view  but is not taken out of the flow and affects layout  occupying its normal space  innerText  but not innerHTML  of the target element and descendants returns empty string

User · Answer

They re not synonyms - display  none removes the element from the flow of the page  and rest of the page flows as if it weren t there   visibility  hidden hides the element from view but not the page flow  leaving space for it on the page

User · Answer

One other difference is that visibility hidden works in really  really old browsers  and display none does not   https   www w3schools com cssref pr class visibility asp  https   www w3schools com cssref pr class display asp

User · Answer

In addition to all other answers  there s an important difference for IE8  If you use display none and try to get the element s width or height  IE8 returns 0  while other browsers will return the actual sizes   IE8 returns correct width or height only for visibility hidden

User · Answer

With visibility hidden the object still takes up vertical height on the page  With display none it is completely removed  If you have text beneath an image and you do display none  that text will shift up to fill the space where the image was  If you do visibility hidden the text will remain in the same location

User · Answer

display  none It will remove the element from the normal flow of the page  allowing other elements to fill in  An element will not appear on the page at all but we can still interact with it through the DOM  There will be no space allocated for it between the other elements  visibility  hidden It will leave the element in the normal flow of the page such that is still occupies space  An element is not visible and Element   s space is allocated for it on the page  Some other ways to hide elements Use z-index  element      z-index  -11111     Move an element off the page  element      position  absolute      top  -9999em     left  -9999em     Interesting information about visibility  hidden and display  none properties visibility  hidden and display  none will be equally performant since they both re-trigger layout  paint and composite  However  opacity  0 is functionality equivalent to visibility  hidden and does not re-trigger the layout step  And CSS-transition property is also important thing that we need to take care  Because toggling from visibility  hidden to visibility  visible allow for CSS-transitions to be use  whereas toggling from display  none to display  block does not  visibility  hidden has the additional benefit of not capturing JavaScript events  whereas opacity  0 captures events

User · Answer

They are not synonyms   display none removes the element from the normal flow of the page  allowing other elements to fill in   visibility hidden leaves the element in the normal flow of the page such that is still occupies space   Imagine you are in line for a ride at an amusement park and someone in the line gets so rowdy that security plucks them from the line  Everyone in line will then move forward one position to fill the now empty slot  This is like display none   Contrast this with the similar situation  but that someone in front of you puts on an invisibility cloak  While viewing the line  it will look like there is an empty space  but people can t really fill that empty looking space because someone is still there  This is like visibility hidden

[css] What is the difference between visibility:hidden and display:none?

Examples related to css

Examples related to visibility