display：none和HTML元素的高度和寬度等於0有什麼區別？

Question

如果我們想使元素從頁面完全消失，我們可以使用CSS屬性值display:none

我們也可以有效地隱藏元素與visibility:hidden，但該元素仍然會乘坐空間就好像它是有這我不想要。

所以，如果我想其實隱藏元素但使用display:none，我看到的width和height等於明確地設置爲元素的0的選項。

這兩者之間的語義差異是什麼？

Answer 1

沒有高度或寬度的元件仍然具有裕度和/或邊界和仍將圍繞由它的存在的元素樹的影響，例如浮動和明確的規則。只有具有display: none的元素纔是真正的不存在。

Answer 2

display:none需要的元素出來的頁面，讓屏幕閱讀器無法看到它。如果你想從dom中完全移除元素，你應該使用display: none，否則它會做同樣的事情。

.hidden { 
    visibility: hidden; 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
} 

Answer 3

display屬性告訴瀏覽器如何顯示元素。顯示：none表示該元素根本不會出現在頁面上。將沒有空間分配它。它將被隱藏。但是，如果你給高度和寬度爲0px;那麼在這種情況下，內容將出現，並且內容將在div外溢出。