visibility：hidden和display：none之间的区别是什么？ [英] What is the difference between visibility:hidden and display:none?

问题描述

CSS规则 visibility：hidden 和 display：none 都会导致元素不可见。是这些同义词吗？

The CSS rules visibility:hidden and display:none both result in the element not being visible. Are these synonyms?

推荐答案

display：none 问题不会出现在页面上（虽然你仍然可以通过dom与它交互）。在其他标签之间不会分配空间。

display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.

visibility：hidden 表示不同于 display：none ，标记不可见，但在页面上为其分配了空间。

visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.

例如：

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

替换 [style-tag-value] display：none 结果：

test |   | test

替换 [style-tag-value] visibility：hidden 结果：

test |                        | test

这篇关于visibility：hidden和display：none之间的区别是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！