我visibility:hidden用来隐藏某些元素，但是它们在隐藏时仍会占用页面上的空间。
我如何才能使它们在视觉上完全消失，就像它们根本不在DOM中一样（但实际上没有从DOM中删除它们）？
如何隐藏元素而不让它们在页面上占用空间？
第4067篇《如何隐藏元素而不让它们在页面上占用空间？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共11个回答
display：none最好避免在页面上占用空白
切换display不允许平滑的CSS过渡。而是同时切换visibility和和max-height。
visibility: hidden;
max-height: 0;
这是在展示后将它们放回原处的另一种做法：无。不要使用display：block / inline等。而是（如果使用javascript）将CSS属性显示设置为”（即空白）
display:none隐藏并设置display:block显示。
用样式代替
<div style="display:none;"></div>
显示：没有什么是解决方案，那完全用空间隐藏了元素。
关于display:none和的故事visibility: hidden
visibility:hidden 表示该标签不可见，但已在页面上为其分配了空间。
display:none表示完全隐藏元素及其空间。（尽管您仍然可以通过DOM与之交互）
这个问题的答案是说使用display：none和display：block，但是对于试图使用css过渡来使用可见性属性显示和隐藏内容的人来说，这无济于事。
这也使我发疯，因为使用display会杀死任何CSS过渡。
一种解决方案是将其添加到使用可见性的类中：
overflow:hidden
这项工作确实取决于布局，但是它应该将空内容保留在其所在的div中。
使用display:none是一个很好的选择，只是删除了一个元素，但对于屏幕阅读器也将被删除。也有讨论是否会影响SEO。在A List Apart上有一篇关于该主题的简短文章
如果你真的只是想隐藏并不会删除元素，更好地利用：
div {
position: absolute;
left: -999em;
}
这样，屏幕阅读器也可以读取它。
此方法的唯一缺点是，此DIV实际上已渲染，并且可能会影响性能，尤其是在手机上。
看，而不是使用visibility: hidden;use display: none;。第一个选项将隐藏但仍占用空间，第二个选项将隐藏且不占用任何空间。
尝试设置display:none为隐藏并设置display:block为显示。
相似问题
问题类别
使用
!important，如果你被迫覆盖现有的CSS样式。