Results 1 to 8 of 8
  1. #1
    Registered User
    Join Date
    Dec 2017
    Posts
    8

    what is the difference between “visibility:hidden” and “display:none”?

    Please tell me
    what is the difference between “visibility:hidden” and “display:none”?

  2. #2
    Registered User 24x7servermanag's Avatar
    Join Date
    Jul 2017
    Location
    India
    Posts
    1,020
    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.
    Server Management Company
    India's Leading Managed Service Provider | Skype: techs24x7
    Cpanel Technical Discussions - Lets talk !

  3. #3
    Senior Member
    Join Date
    Mar 2017
    Posts
    422
    Quote Originally Posted by 24x7servermanag View Post
    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.
    Agree with this and good information with complete answer.

  4. #4
    Registered User
    Join Date
    Sep 2017
    Posts
    1,192
    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.

  5. #5
    Senior Member
    Join Date
    May 2018
    Posts
    155
    Display: none;

    display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them. Take a look at our last example on this page if you want to know how this can be achieved.

    visibility: hidden;

    The element is hidden (but still takes up space)

  6. #6
    Senior Member
    Join Date
    Jun 2018
    Location
    australia
    Posts
    165
    display:none will not be available in the page and does not occupy any space. 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. visibility:hidden preserve the space, whereas display:none doesn't preserve the space.

  7. #7

  8. #8
    Registered User
    Join Date
    Mar 2019
    Location
    Ahmedabad
    Posts
    180
    display:none removes the element from the layout flow.
    visibility:hidden hide but it leaves the space

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

  Find Web Hosting      
  Shared Web Hosting UNIX & Linux Web Hosting Windows Web Hosting Adult Web Hosting
  ASP ASP.NET Web Hosting Reseller Web Hosting VPS Web Hosting Managed Web Hosting
  Cloud Web Hosting Dedicated Server E-commerce Web Hosting Cheap Web Hosting


Premium Partners:


Visit forums.thewebhostbiz.com: to discuss the web hosting business, buy and sell websites and domain names, and discuss current web hosting tools and software.