Ashish Kalra
What is the difference between display:none and visibility:hidden style?
By Ashish Kalra in .NET on Apr 10 2015
  • Saroj Kumar Sahu
    Apr, 2015 29

    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.

    • 10
  • Pankil Bhatt
    Apr, 2015 16

    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

    • 3
  • Pankaj  Kumar Choudhary
    May, 2015 14

    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

    • 1
  • Mohan  G
    Apr, 2015 17

    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.

    • 1
  • Ashish Kalra
    Apr, 2015 10

    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. Ashish Kalra enjoys reading CSharp Articles. Output will be: Ashishenjoys reading CSharp Articles. Ashish Kalra enjoys reading CSharp Articles. Output will be: Ashish enjoys reading CSharp Articles.

    • 1
  • Avinash Vajpayee
    Jun, 2015 23

    Acc to avi Visibility property when hidden it occupy space by the element but display property if none then the element space remove Completely.

    • 0
  • Avinash Vajpayee
    Jun, 2015 23

    Acc to avi Visibility property when hidden it occupy space by the element but display property if none then the element space remove Completely.

    • 0
  • Vignesh Mani
    Jun, 2015 19

    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.

    • 0
  • Upendra Pratap Shahi
    Jun, 2015 5

    display:none removes the space and visibility:hidden just hides the value space is there

    • 0
  • Nanhe Siddique
    May, 2015 30

    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.

    • 0
  • Vaibhav Salwe
    May, 2015 30

    Hello Ashish,Common part of both using display:none and visibility:hidden is getting hidden and as per difference is concernDisplay:none is hide dom element as well as space occupied by this elementVisibility:hidden is hide only dom element.

    • 0
  • Shailesh Uke
    May, 2015 27

    display:none not acquire Space Controlvisibility:hidden acquire space control

    • 0
  • Rahul Prajapat
    May, 2015 27

    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

    • 0
  • Krishnaveni D
    May, 2015 19

    display:none -Hides the element, and it does not take up any spaceEx:SampleDisplay Element
    Result:Display Element.visibility:hidden-Hides the element but it still takes up space in the layout.Ex:SampleDisplay Element
    Result: Display Element.

    • 0
  • Kml Surani
    May, 2015 6

    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:

    • 0


Most Popular Job Functions


MOST LIKED QUESTIONS