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

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)?

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 the best thing to avoid takeup white space on the page

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.

use style instead like

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

above my knowledge it is possible in 4 ways

1. HTML<button style="display:none;"></button>
2. CSS #buttonId{ display:none; }
3. jQuery $('#buttonId').prop('display':'none'); & $("#buttonId").css('opacity', 0);

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

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)

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.

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)

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.

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.

$('#abc').css({"display":"none"});

this hides the content and also does not leave empty space.