CSS：隐藏元素但保留宽度（不保留高度）

在本文中，我们将介绍如何使用CSS隐藏元素但同时保留其宽度（而不保留高度）。这在某些特定的网页设计场景中非常实用，例如在页面布局中需要隐藏元素却不想改变其他元素的排列。

首先，让我们来看一个简单的示例。假设我们有一个包含两个元素的容器，一个是标题元素，另一个是内容元素。我们希望隐藏内容元素，但是保留标题元素的宽度。

<div class="container">
  <h1>Title</h1>
  <p class="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

现在，我们需要通过CSS来隐藏内容元素但保留其宽度。有多种方法可以实现这个效果，接下来我们将介绍其中两种方法。

阅读更多：CSS 教程

方法一：使用 display 属性

首先，我们可以使用display属性将内容元素的display属性设置为none。这将隐藏元素并且不会保留它的空间。

.hidden {
  display: none;
}

上面的代码将隐藏所有使用class为”hidden”的元素，包括我们的内容元素。现在，我们可以在网页中将其应用，查看效果。

<style>
  .hidden {
    display: none;
  }
</style>
<div class="container">
  <h1>Title</h1>
  <p class="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

在这个例子中，虽然内容元素被隐藏了，但标题元素仍然保留着原来的宽度。

方法二：使用 visibility 属性

第二种方法是使用visibility属性。与display属性不同，visibility属性可以隐藏元素但保留其空间。

.hidden {
  visibility: hidden;
}

上面的代码将class为”hidden”的元素的visibility属性设置为hidden，这将导致该元素隐藏但保留其空间。

让我们应用这个方法到我们之前的示例中，看看效果。

<style>
  .hidden {
    visibility: hidden;
  }
</style>
<div class="container">
  <h1>Title</h1>
  <p class="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

现在，虽然内容元素被隐藏了，但标题元素仍然保留了原来的宽度。

但是需要注意的是，content元素的高度仍然存在，只是不可见了。这可能会导致其他元素的布局被影响。如果希望隐藏元素并且不保留空间，可以使用display属性。如果希望隐藏元素但保留空间，可以使用visibility属性。