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

Question

我正在使用visibility:hidden隐藏某些元素,但它们仍隐藏在页面上占用空间.

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

Answer 1

尝试设置display:none隐藏并设置display:block为显示.

并非所有项目都应该是`display:block`,有些必须设置为`display:inline`(例如`<span>`或`<a>`或`<img>`DOM元素). (25认同)
我将删除'display:none'来显示. (11认同)
@pranay:问题表达不是很好,但Huusom正在解决用户遇到的问题. (4认同)
不可能从 dom man 中删除元素。也可以使用此选项。阅读问题 (3认同)
@pranay问题是隐藏它们不要将它们从DOM中删除. (2认同)

Answer 2

使用样式代替

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

Answer 3

切换display不允许平滑的 CSS 过渡。而是同时切换visibility和max-height。

visibility: hidden;
max-height: 0;

当您处理动画时，这非常有用。因为我们使用诸如“transform:translateX(-100%)”之类的东西将元素隐藏在可见区域之外。我们不想要 `display: none` (2认同)
这应该是可接受的答案，因为它不会按照要求从 DOM 中删除。 (2认同)

Answer 4

使用display:none是一个很好的选择只是为了删除元素但它也将被移除为屏幕阅读器.如果它影响SEO,也有讨论.A List Apart上有关于该主题的好文章

如果你真的只是想隐藏并不会删除元素,更好地利用:

div {
  position: absolute; 
  left: -999em;
}

像这样它也可以被屏幕阅读器阅读.

这种方法的唯一缺点是,这个DIV实际上是渲染的,它可能会影响性能,尤其是在手机上.

如果你选择定位一些绝对的东西,你可以在大多数情况下用`visibility:hidden;`运行,假设你有其他绝对元素,它们不会与空间发生冲突,只是`z-index`的冲突.只是为了隐藏一个元素,我会选择`visibility` (2认同)

Answer 5

display: none是解决方案，这完全隐藏了元素及其空间。

visibility:hidden 表示标签不可见，但在页面上为其分配了空间。

display:none意味着完全隐藏元素及其空间。（虽然你仍然可以通过 DOM 与它交互）

Answer 6

看,而不是visibility: hidden;使用display: none;.第一个选项将隐藏但仍占用空间,第二个选项将隐藏并且不占用任何空间.

Answer 7

display:none隐藏并设置display:block为显示。

Answer 8

这个问题的答案是说使用display：none和display：block，但是对于试图使用css过渡来使用可见性属性显示和隐藏内容的人来说，这无济于事。

这也让我发疯，因为使用display会杀死任何CSS过渡。

一种解决方案是将其添加到使用可见性的类中：

overflow:hidden

这项工作确实取决于布局，但应将空内容保留在其所在的div中。