我使用可视性:隐藏来隐藏某些元素，但它们在隐藏时仍然占用页面空间。
我怎么能让它们在视觉上完全消失，就好像它们根本不在DOM中一样(但实际上没有从DOM中删除它们)?
当前回答
使用display:none是一个很好的选择，只是删除一个元素，但它也会被屏幕阅读器删除。也有关于它是否影响SEO的讨论。在a List Apart上有一篇关于这个主题的好文章
如果你真的只是想隐藏而不是删除一个元素，最好使用:
div {
position: absolute;
left: -999em;
}
像这样，它也可以由屏幕阅读器读取。
这种方法唯一的缺点是，这个DIV是实际呈现的，它可能会影响性能，特别是在移动电话上。
其他回答
看，与其使用可见性:隐藏;使用display: none;。第一个选项将隐藏，但仍然占用空间，第二个选项将隐藏，但不占用任何空间。
使用display:none是一个很好的选择，只是删除一个元素，但它也会被屏幕阅读器删除。也有关于它是否影响SEO的讨论。在a List Apart上有一篇关于这个主题的好文章
如果你真的只是想隐藏而不是删除一个元素，最好使用:
div {
position: absolute;
left: -999em;
}
像这样，它也可以由屏幕阅读器读取。
这种方法唯一的缺点是，这个DIV是实际呈现的，它可能会影响性能，特别是在移动电话上。
由于我一直在解决这个问题并进行研究，所以我想分享一下我的见解。如果您已经进入了这个页面，我假设您正在试图弄清楚为什么您的元素占用了页面上的空间，即使有样式。Display = "none"。
最有可能的是，造成这种情况的原因并不是存在问题的元素;而是它的孩子、父母或兄弟姐妹。打开控制台，转到Elements选项卡。看看里面有什么可能占据空间的线索。也许你正在使用模板引擎，并没有意识到<br>是在动态<div>之外呈现的。或者，您应该瞄准嵌套更多的元素。在进行故障排除时，请尝试按照这些思路进行思考。
这个问题的答案是说使用display:none和display:block，但这对那些试图使用css过渡来显示和隐藏内容的人没有帮助。
这也让我抓狂，因为使用display会杀死任何css过渡。
一个解决方案是将这个添加到使用可见性的类中:
overflow:hidden
要做到这一点，确实取决于布局，但它应该在它所在的div中保持空内容。
显示:none是解决方案，这是完全隐藏元素与它的空间。
关于显示:无，可见性:隐藏
可见性:隐藏意味着标签不可见，但是在页面上为它分配了空间。
显示:none表示完全隐藏元素的空间。(尽管您仍然可以通过DOM与它交互)