CSS 隐藏/不显示元素但保留元素占用空间的方法

在前端开发中，我们可能会遇到只需要占位但是不需要显示元素的需求，常用的display:none方法是隐藏元素且不占用空间，无法解决这种特殊需求。那么使用 css 怎么做到隐藏（不显示）元素但保留元素占用的空间呢？本文就介绍两种方法：

方法一 – visibility

我们可以使用 visibility: hidden 来隐藏元素，这时元素不显示但仍然占据着原来的空间。

.hidden {
  visibility: hidden;
}

方法二 – opacity

另一种方法是使用 opacity: 0让元素完全透明，这时元素实际上是存在的，只是看不到而已，这样当然也占据着原来的空间。

.hidden {
  opacity: 0;
}