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

使用!important，如果你被迫覆盖现有的CSS样式。

display: none !important;

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为显示。