在前端开发中，经常需要用到隐藏某些元素的技巧。而在隐藏元素时，有时候需要让这些元素不占据空间。这种技术在 CSS 中也有对应的解决方案，下面我们来学习一下 CSS 中如何隐藏不占空间。

在 CSS 中，我们有一种常用的隐藏元素的方式，就是使用display: none;属性。然而，这种方式会使元素完全不显示，并且在页面布局中也不占据任何空间。当我们想要隐藏元素但仍然希望它占据空间时，就需要使用其他的方法。

这时候，我们可以使用visibility: hidden;属性。这种方式与display: none;属性有所不同。当我们使用visibility: hidden;时，元素被隐藏但仍然占据原来的空间。它只是变为透明，无法被看到。这样，元素虽然被隐藏了，但是它的位置仍然被占据。HTML 中的其他元素仍然会认为这个元素仍然存在，从而不会影响其他元素的位置。

.hidden {
visibility: hidden;
}

同样地，我们可以通过opacity: 0;属性来实现不占据空间的隐藏效果。这种方式跟visibility: hidden;有点相似，都是隐藏元素但仍然让它占据空间。不同的是，opacity: 0;可以将元素变为透明，但仍然保留元素的框架大小。

.hidden {
opacity: 0;
}

总结一下，我们可以通过visibility: hidden;或opacity: 0;属性来实现元素的不占据空间的隐藏效果。这种方式可以保持页面布局稳定，不会因为隐藏某个元素而导致其他元素位置错位。在具体使用时，根据实际情况来选择具体的隐藏方式。