hidden invisible elements take space

Question

I'd like to make some empty hidden elements (iframes would be nice, paragraphs would do) that java script would later fill and modify. I have not been able to figure out how to keep these elements from taking up space. I've turned off margins and padding and set height to zero but still end up with blank space.

I'd like to see an example of an hidden element that takes no space on the page (actually, I'd like to see the html, style, and javascript :-).

Answer 1

#myelement { display:none; }

should arelady do it via css, when you use

<div id="myelement"></div>

or any other element.

Answer 2

The most common solution is an input with type hidden.

<input type="hidden" value="yourvalue" id="yourid" />

No styling required.

You can set the value of this input with somthing like

document.getElementById('yourid').value="The Value Here";

Answer 3

If you're using visibility: hidden; you should be using display: none; instead.

Answer 4

Why can't you just set style="display:none" or style="visibility:hidden", and then set it to visible after you have comleted the missing content?

Answer 5

I assume you are using visibility: hidden? As you have seen, this will hide it, but will still take up space.

However, using display: none will hide it and remove it from the page layout.

Answer 6

style="visibility:hidden;line-height:0;"

Setting the height to less than the line-height is generally a waste of time.