Loading
What is the difference between display:none and visibility:hidden style?
15 Answers
Acc to avi Visibility property when hidden it occupy space by the element but
display property if none then the element space remove Completely.
Avinash VajpayeePosted Jun 23, 2015, 2:44 AM
Acc to avi Visibility property when hidden it occupy space by the element but
display property if none then the element space remove Completely.
Avinash VajpayeePosted Jun 23, 2015, 2:44 AM
Display None:
It is not display as well as not allocate space where placed particular controller.
Visibility Hidden:
It is not display as well as take space where placed particular controller we can not place other controller.It show blank space.
Vignesh ManiPosted Jun 19, 2015, 3:37 AM
display:none removes the space and visibility:hidden just hides the value
space is there
Upendra Pratap ShahiPosted Jun 5, 2015, 3:00 AM
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.
Nanhe SiddiquePosted May 30, 2015, 6:53 AM
Hello Ashish,
Common part of both using display:none and visibility:hidden is getting hidden and as per difference is concern
Display:none is hide dom element as well as space occupied by this element
Visibility:hidden is hide only dom element.
Vaibhav SalwePosted May 30, 2015, 6:50 AM
display:none not acquire Space Control
visibility:hidden acquire space control
Shailesh UkePosted May 27, 2015, 10:16 AM
display:none remove the element from document, element doesn't take any space in document.
visibility:false hide the element in document but still take space in document, you can see element by view page source
Rahul PrajapatPosted May 27, 2015, 6:04 AM
display:none -Hides the element, and it does not take up any space
Ex:Display Element
Result:Display Element.
visibility:hidden-Hides the element but it still takes up space in the layout.
Ex:Display Element
Result: Display Element.
Krishnaveni DPosted May 19, 2015, 5:22 AM
Both Method are use to hide the content in a document but both have a big difference that Visible:hidden always hold that particular content but it not visible for user bit in case of display:none content never exist in document so it can not visible for user...
Means Visible :hidden method contain space for content but Dislay:none doesn't hold any space for content
Pankaj Kumar ChoudharyPosted May 14, 2015, 12:23 AM
Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". However, notice that these two methods produce different results:
visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout:
Posted May 6, 2015, 6:44 AM
visibility: hidden hides the element, but it still takes up space in the layout.
display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.
Saroj Kumar SahuPosted Apr 29, 2015, 1:33 AM
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.
Mohan GPosted Apr 17, 2015, 8:35 AM
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
Pankil BhattPosted Apr 16, 2015, 2:02 AM
Well people often get confused when interviewer ask this.But when you answer it you feel yourself top of the world not because you answered it but because you proved your intellect in front of an interviewer.
Anyways the answer is simple:
display:none will adjust the spaces thus automatically aligns the text following it to cover the space but in case of visibility:hidden space remains intact.
e.g.
Ashishenjoys reading CSharp Articles.
Output will be:
Ashishenjoys reading CSharp Articles.
Ashishenjoys reading CSharp Articles.
Output will be:
Ashish enjoys reading CSharp Articles.
Ashish KalraPosted Apr 10, 2015, 7:25 AM