跳至內容
Astera Technology

隱藏內容時,要不要保留原本空位?

量度 visibility:hidden 和 display:none:一個保留空位,一個不產生版面框。

隱藏框保留空位,display:none 框不佔流高度。

下載完整個案資料及參考答案 ↓

先看這個例子

每段至少佔 24px。hidden 段落保留框,display:none 段落不產生框。基準字級時,「後面」比「前面」低 48px。

輸入與瀏覽器原生結果
情況輸入或查看方法結果與意思
隱藏段落查看外框及 visibility框保留;基準字級為 24px
不產生框的段落查看 display 及外框display:none;量度高度為 0
原文查看 DOM 文字兩段文字仍在來源樹內
下載可編輯 CSV ↓

瀏覽器怎樣處理

Visibility 在本例控制顯示,但保留框;display:none 則不產生框。兩者都不刪 DOM 文字。放大文字可能令最小高度框增高,因此 48px 基準結果不能套用到放大後。

opacity 不等同移除版面框

反例讓段落透明,不是移除其框。

反例原始碼,請另開例子核對
<style>body{margin:8px}</style>
<style>p{margin:0;min-height:24px}.transparent{opacity:0}</style><p>前面</p><p class="transparent">透明筆記</p><p id="after">後面</p>

透明段落仍有版面框,本例中心位置也仍可被命中;不能當作 display:none。

試着修正

只把 opacity 設為零,足以證明內容已退出版面和操作嗎?

查看參考答案

不足夠。要查實際框和操作;opacity 本身只改繪畫透明度。

  • 各框及最後段落位置都要量。
  • DOM 是否存在與畫面有沒有顯示分開。

原始例子檔案

相關資源