Hidden HTML elements take space

I'd like to make some empty hidden elements (iframes would be nice, paragraphs would do) that Javascript 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 bu开发者_开发问答t 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, CSS, and Javascript. :-).

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

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.

#myelement { display:none; } should already do it via CSS, using <div id="myelement"></div>

I have found that if i use visibility: none then I lose the targets embedded in those objects. As a result I set the font-size: 0pt which seems to work well for me.

I use this to hide the default names that ReSTructured text puts in for inline internal targets; span.target { font-size: 0pt };

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

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?

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

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

To hide the element, use :

document.getElementById(Id).style.display = "none";

To show the element, use :

document.getElementById(Id).style.display = "inline-block";