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

Question

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

use style instead like

<div style="display:none;"></div>

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.

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.

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

visibility: hidden;
max-height: 0;

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)