How to hide elements without having them take space on the page

Question

I m using visibility hidden to hide certain elements  but they still take up space on the page while hidden   How can I make them totally disappear visually  as though they are not in the DOM at all  but without actually removing them from the DOM

User · Answer

Thanks to this question  I wanted the exact opposite  i e a hidden div should still occupy its space on the browser  So  I used visibility  hidden instead of display  none

User · Answer

use style instead like   lt div style  display none   gt  lt  div gt

User · Answer

display none to hide and set display block to show

User · Answer

here s a different take on putting them back after display none  don t use  display block inline etc  Instead  if using javascript  set css property display to     i e  blank

User · Answer

above my knowledge it is possible in 4 ways    HTML lt button style  display none   gt  lt  button gt  CSS  buttonId  display none    jQuery     buttonId   prop  display   none     amp       buttonId   css  opacity   0

User · Answer

To use display none is a good option just to removing an element BUT it will be also removed for screenreaders  There are also discussions if it effects SEO  There s a good  short article on that topic on A List Apart  If you really just want hide and not remove an element  better use   div     position  absolute     left  -999em      Like this it can be also read by screen readers   The only disadvantage of this method is  that this DIV is actually rendered and it might effect the performance  especially on mobile phones

User · Answer

The answer to this question is saying to use display none and display block  but this does not help for someone who is trying to use css transitions to show and hide content using the visibility property   This also drove me crazy  because using display kills any css transitions   One solution is to add this to the class that s using visibility    overflow hidden   For this to work is does depend on the layout  but it should keep the empty content within the div it resides in

User · Answer

abc   css   display   none       this hides the content and also does not leave empty space

User · Answer

Toggling display does not allow for smooth CSS transitions  Instead toggle both the visibility and the max-height   visibility  hidden  max-height  0

User · Answer

Look  instead of using visibility  hidden  use display  none   The first option will hide but still takes space and the second option will hide and doesn t take any space

User · Answer

display none is the best thing to avoid takeup white space on the page

User · Answer

Try setting display none to hide and set display block to show

User · Answer

display  none is solution  That s completely hides elements with its space   Story about display none and visibility  hidden visibility hidden means the tag is not visible  but space is allocated for it on the page  display none means completely hides elements with its space   although you can still interact with it through the DOM

[html] How to hide elements without having them take space on the page?

Examples related to html

Examples related to css