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

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

<div hidden id="divCheckbox">

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

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

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

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

资料来源：这里

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

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

#divCheckbox {
display: none;
}

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

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

或极简主义者：

.hidden {
display: none;
}

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

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

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

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

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

隐藏属性文档（MDN，W3C）

采用 display:none;

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

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

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

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