visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。 - 在线编辑器

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    h1.hidden {
      visibility: hidden;
    }
  </style>
</head>

<body>
  <h1>这是一个可见标题</h1>
  <h1 class="hidden">这是一个隐藏标题</h1>
  <p>注意, 实例中的隐藏标题仍然占用空间。</p>
</body>
</html>
​x
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    h1.hidden {
      visibility: hidden;
    }
  </style>
</head>
​
<body>
  <h1>这是一个可见标题</h1>
  <h1 class="hidden">这是一个隐藏标题</h1>
  <p>注意, 实例中的隐藏标题仍然占用空间。</p>
</body>
</html>