如何创建不创建换行符或水平空间的隐藏div？

我想要一个隐藏的复选框，该复选框不占用屏幕上的任何空间。

如果我有这个：

<div id="divCheckbox" style="visibility: hidden">

我没有看到该复选框，但仍会创建一个新行。

如果我有这个：

<div id="divCheckbox" style="visibility: hidden; display:inline;">

它不再创建新行，而是占用屏幕上的水平空间。

有没有办法让隐藏的div不占用空间（垂直或水平）？

采用 display:none;

<div id="divCheckbox" style="display: none;">

• visibility: hidden 隐藏元素，但是它仍然占用布局中的空间。

• display: none 从文档中完全删除元素，它不占用任何空间。

自HTML5发行以来，现在可以轻松做到：

<div hidden>This div is hidden</div>

注意：某些旧版浏览器不支持此功能，尤其是IE <11。

隐藏属性文档（MDN， W3C）

使用style="display: none;"。另外，您可能不需要DIV，只需display: none在复选框上将样式设置为即可。

除了CMS答案外，您可能还需要考虑将样式放在外部样式表中，并将样式分配给ID，如下所示：

#divCheckbox {
display: none;
}

由于您应该专注于CSS的可用性和通用性，而不是使用id来指向特定的布局元素（这会导致庞大或多个css文件），因此您可能应该在链接的.css文件中使用true类：

.hidden {
visibility: hidden;
display: none;
}

或极简主义者：

.hidden {
display: none;
}

现在，您可以通过以下方式简单地应用它：

<div class="hidden"> content </div>

考虑使用<span>隔离标记样式的小片段而不破坏布局。这似乎比试图强制a <div>不显示自己更惯用-如果实际上无法以所需的方式设置复选框本身的样式。

通过鼠标单击显示/隐藏：

<script language="javascript">

    function toggle() {

        var ele = document.getElementById("toggleText");
        var text = document.getElementById("displayText");

        if (ele.style.display == "block") {

            ele.style.display = "none";
            text.innerHTML = "show";
        }
        else {

            ele.style.display = "block";
            text.innerHTML = "hide";
        }
    }
</script>

<a id="displayText" href="javascript:toggle();">show</a> <== click Here

<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

资料来源：这里

要防止复选框占用任何空间而不将其从DOM中删除，请使用hidden。

<div hidden id="divCheckbox">

为了防止该复选框从占用任何空间，也从DOM，使用移除它display: none。

<div id="divCheckbox" style="display:none">

要可视地隐藏元素，但将其保留在html中，可以使用：

<div style='visibility:hidden; overflow:hidden; height:0; width:0;'>
  [content]
</div>

要么

<div style='visibility:hidden; overflow:hidden; position:absolute;'>
  [content]
</div>

可能出什么问题了display:none？它将元素从html中完全删除，因此如果某些功能需要访问隐藏元素中的某些内容，则可能会使其功能失效。

display: none;

这应该使元素消失并且不占用任何空间。