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

我希望有一个隐藏的复选框，不占用屏幕上的任何空间。

如果我有这个：

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

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

如果我有这个：

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

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

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

---

#1楼

使用style="display: none;" 。 此外，您可能不需要使用DIV，只需将样式设置为display: none复选框上的display: none可能就足够了。

---

#2楼

使用display:none;

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

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

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

---

#3楼

考虑使用<span>隔离要标注的小段标记，而不会破坏布局。 这似乎比试图强制<div>不显示自己更具惯用性 - 如果实际上复选框本身无法按照您想要的方式设置样式。

---

#4楼

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

#divCheckbox {
display: none;
}

---

#5楼

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

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

或者极简主义者：

.hidden {
display: none;
}

现在您只需通过以下方式应用它：

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

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3192713