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

HtmlCss

Html Problem Overview

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

Html Solutions

Solution 1 - Html

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

Solution 2 - Html

use style instead like

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

Solution 3 - Html

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.

Solution 4 - Html

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.

Solution 5 - Html

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

visibility: hidden;
max-height: 0;

Solution 6 - Html

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

Solution 7 - Html

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.

Solution 8 - Html

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

Solution 9 - Html

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)

Solution 10 - Html

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

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

Solution 11 - Html

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

Solution 12 - Html

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

Solution 13 - Html

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.

Solution 14 - Html

If somehow all the other options to hide an element do not suit you, there is another option which I do not see mentioned. It works assuming the element has no children.

It will hide an element without occupying space:

display: contents;

Check the browser support as it is a newish CSS feature.

Solution 15 - Html

With visibility set to hidden the only way I know of to make it not take up space is to use position:absolute and then set the top, left, etc., parameters. It's not ideal but it works.

Solution 16 - Html

As I have been troubleshooting this issue and researching, I thought I'd share my insight. If you've gotten yourself to this page, I assume you are trying to figure out why your element is taking up space on your page even with style.display = "none".

Most likely, the reason for this is NOT the element in question; but a child, parent, or sibling of it. Open up your console and go to the Elements tab. Look in there for clues as to what could possibly be taking up space. Maybe you're using a template-engine and didn't realize a <br> was rendering outside of a dynamic <div>. Or maybe you should be targeting a more nested element. Try to think along these lines while troubleshooting.

Solution 17 - Html

if display: none; doesn't work you have to add clear: none;

Categories
Recommended Html Solutions
Recommended Css Solutions

Previous Solution:

INNER JOIN vs LEFT JOIN performance in SQL Server

SqlSql ServerPerformance

Next Solution:

Multiple GitHub Accounts & SSH Config

SshGithubSsh Keys

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionripper234View Question on Stackoverflow
Solution 1 - HtmlHuusomView Answer on Stackoverflow
Solution 2 - HtmlSalilView Answer on Stackoverflow
Solution 3 - Htmlalboth - undkonsorten.comView Answer on Stackoverflow
Solution 4 - HtmlalejnavabView Answer on Stackoverflow
Solution 5 - HtmlAhmadView Answer on Stackoverflow
Solution 6 - HtmlHidayt RahmanView Answer on Stackoverflow
Solution 7 - HtmlOmarView Answer on Stackoverflow
Solution 8 - HtmlPranay RanaView Answer on Stackoverflow
Solution 9 - HtmlAnurag PriyadarshiView Answer on Stackoverflow
Solution 10 - HtmlSanHView Answer on Stackoverflow
Solution 11 - HtmlgdmanandamohonView Answer on Stackoverflow
Solution 12 - HtmlGilView Answer on Stackoverflow
Solution 13 - HtmlBinita BharatiView Answer on Stackoverflow
Solution 14 - HtmlRui MarquesView Answer on Stackoverflow
Solution 15 - HtmlMike KView Answer on Stackoverflow
Solution 16 - HtmlShelby AnneView Answer on Stackoverflow
Solution 17 - HtmlJasper AbariciaView Answer on Stackoverflow