display:none 和将 HTML 元素的高度和宽度设置为 0 有什么区别？

Question

如果我们想让一个元素从页面中完全消失，我们可以使用 CSS 属性值display:none

或者，我们可以有效地隐藏一个元素，visibility:hidden但该元素仍然会占用空间，就好像它在那里一样，这是我不想要的。

因此，如果我想实际隐藏一个元素而不使用，我会看到一个显式设置该元素的和等于的display:none选项。widthheight0

这两者之间的语义差异是什么？

Answer 1

没有高度或宽度的元素仍然具有边距和/或边框，并且仍然会通过其在树中的存在来影响周围的元素，例如具有浮动和清晰的规则。只有具有的元素display: none才是真正不存在的。