隐藏的 HTML 元素占用空间答案

【问题标题】：Hidden HTML elements take space隐藏的 HTML 元素占用空间
【发布时间】：2011-04-11 16:16:20
【问题描述】：

我想制作一些空的隐藏元素（iframe 会很好，段落也可以），以便 Javascript 稍后填充和修改。我一直无法弄清楚如何防止这些元素占用空间。我已关闭边距和内边距并将高度设置为零，但仍以空白结束。

我想看一个不占用页面空间的隐藏元素的示例。实际上，我想看看 HTML、CSS 和 Javascript。 :-)。

【问题讨论】：

【解决方案1】：

如果您使用的是visibility: hidden;，则应该使用display: none;。

【讨论】：

【解决方案2】：

我假设您正在使用可见性：隐藏？如您所见，这将隐藏它，但仍会占用空间。

但是，使用 display: none 会将其隐藏并从页面布局中删除。

【讨论】：

【解决方案3】：

#myelement { display:none; } 应该已经通过 CSS 完成了，使用 <div id="myelement"></div>

【讨论】：

【解决方案4】：

我发现如果我使用visibility: none，那么我会丢失嵌入在这些对象中的目标。结果我设置了font-size: 0pt，这似乎对我很有效。

我使用它来隐藏 ReSTructured 文本为内联内部目标设置的默认名称； span.target { font-size: 0pt };

【讨论】：

【解决方案5】：

最常见的解决方案是隐藏类型的输入。

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

不需要样式。

你可以用类似的东西设置这个输入的值

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

【讨论】：

【解决方案6】：

为什么不能只设置 style="display:none" 或 style="visibility:hidden"，然后在完成缺失的内容后将其设置为可见？

【讨论】：

【解决方案7】：

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

将高度设置为小于行高通常是浪费时间。

【讨论】：

【解决方案8】：

要隐藏元素，请使用：

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

要显示元素，请使用：

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

【讨论】：