我正在使用visibility:hidden来隐藏某些元素，但是在隐藏时它们仍会在页面上占用空间。
如何让它们在视觉上完全消失，好像它们根本不在DOM中（但实际上没有从DOM中删除它们）？
答案 0 :(得分：266)
尝试设置display:none隐藏并设置display:block以显示。
答案 1 :(得分：37)
使用样式而不是
<div style="display:none;"></div>
答案 2 :(得分：14)
使用display:none是一个很好的选择，只是删除元素但也会删除屏幕阅读器。如果它影响SEO，也有讨论。关于该主题的文章有一篇很好的短文on A List Apart
如果您真的只想隐藏并不删除元素，请更好地使用：
div {
position: absolute;
left: -999em;
}
像这样它也可以被屏幕阅读器阅读。
这种方法的唯一缺点是，这个DIV实际上是渲染的，它可能会影响性能，尤其是在手机上。
答案 3 :(得分：9)
切换display不允许平滑的CSS过渡。而是同时切换visibility和max-height。
visibility: hidden;
max-height: 0;
答案 4 :(得分：8)
查看，而不是使用visibility: hidden;使用display: none;。第一个选项会隐藏，但仍然占用空间，第二个选项将隐藏，不占用任何空间。
答案 5 :(得分：4)
这个问题的答案是使用display：none和display：block，但这对尝试使用css过渡使用visibility属性显示和隐藏内容的人没有帮助。
这也让我抓狂，因为使用显示会杀死任何css过渡。
一种解决方案是将其添加到使用可见性的类中：
overflow:hidden
要实现这一点，取决于布局，但它应该将空内容保留在它所驻留的div中。
答案 6 :(得分：3)
display:none隐藏并设置display:block以显示。
答案 7 :(得分：2)
这是在展示后将它们放回去的另一种看法：无。不要使用display：block / inline等。相反（如果使用javascript）将css属性显示设置为＆＃39;＆＃39; （即空白）
答案 8 :(得分：2)
display：none 是解决方案，它完全隐藏了元素及其空间。
display:none和visibility: hidden visibility:hidden 表示该标记不可见，但会在页面上为其分配空间。
display:none 表示完全隐藏元素及其空间。 （尽管你仍然可以通过DOM与它进行交互）
答案 9 :(得分：1)
$('#abc').css({"display":"none"});
这会隐藏内容，也不会留空空间。
答案 10 :(得分：1)
据我所知，它有可能以4种方式
<button style="display:none;"></button> #buttonId{ display:none; } $('#buttonId').prop('display':'none');＆amp; $("#buttonId").css('opacity', 0); 答案 11 :(得分：1)
显示：无 是避免页面占用空白区域的最佳选择
答案 12 :(得分：0)
感谢这个问题。我希望完全相反，即隐藏的div仍应在浏览器上占据其空间。因此，我使用了visibility: hidden而不是display: none。
答案 13 :(得分：0)
如果不知何故隐藏元素的所有其他选项都不适合您，还有另一个我没有看到提到的选项。 假设元素没有子元素。
它将隐藏一个元素而不占用空间：
display: contents;
检查浏览器支持，因为它是一个新的 CSS 功能。
答案 14 :(得分：0)
将可见性设置为隐藏后，我所知道的使其不占用空间的唯一方法是使用 position:absolute，然后设置顶部、左侧等参数。这并不理想，但它有效。
答案 15 :(得分：-1)
如果显示：无；不起作用，您必须添加 clear: none;