如何隐藏元素而不让他们在页面上占用空间?

我使用可视性:隐藏来隐藏某些元素，但它们在隐藏时仍然占用页面空间。

我怎么能让它们在视觉上完全消失，就好像它们根本不在DOM中一样(但实际上没有从DOM中删除它们)?

当前回答

如果所有隐藏元素的其他选项都不适合你，还有另一个选项，我没有看到提到。假设元素没有子元素，它就能工作。

它将隐藏一个元素而不占用空间:

display: contents;

检查浏览器的支持，因为它是一个较新的CSS特性。

其他回答

尝试设置display:none为隐藏，设置display:block为显示。

如果显示:无;不管用，你必须加上clear: none;

切换显示不允许平滑的CSS过渡。相反，切换能见度和最大高度。

visibility: hidden;
max-height: 0;

如果所有隐藏元素的其他选项都不适合你，还有另一个选项，我没有看到提到。假设元素没有子元素，它就能工作。

它将隐藏一个元素而不占用空间:

display: contents;

检查浏览器的支持，因为它是一个较新的CSS特性。

使用style代替

<div style="display:none;"></div>

推荐文章