如何隱藏 HTML 元素而不影響頁面佈局？

在隱藏元素的同時保留頁面佈局

當旨在隱藏HTML 元素而不影響視覺佈局時，使用Visibility:hidden 可能會導致導致不良結果。在視圖中隱藏元素時，它繼續佔據頁面上的相同空間。

停用顯示

要克服此挑戰，建議使用 display 屬性。透過將元素的顯示設為 none，它實際上會從視覺表示中消失，就好像它已完全從 DOM 中刪除一樣。

考慮以下範例：

<div>
<p>最初，div元素正常顯示。要隱藏它：</p>
<pre class="brush:php;toolbar:false">#element {
  display: none;
}

當應用 display: none 時，該元素在視覺上變得不存在，從而釋放其先前佔用的空間。要恢復元素的可見性：

#element {
  display: block;  
}

使用顯示的好處：無

• 保留頁面佈局
• 維護元素在HTML程式碼中的位置
• 允許元素通過設定display: block

輕鬆再次顯示