可见性:隐藏保留空间;显示:没有没有。

正如在这个堆栈的其他地方所描述的，这两者并不是同义词。Visibility:hidden将在页面上留下空白，而display:none将完全隐藏元素。我认为有必要讨论一下这是如何影响给定元素的子元素的。如果你要使用visibility:hidden，那么你可以用正确的样式显示该元素的子元素。但是对于display:none，不管你是否使用display: block | flex | inline | grid | inline-block，你都会隐藏子元素。

Display:none将隐藏元素并折叠正在占用的空间，而visibility:hidden将隐藏元素并保留元素的空间。display:none也会影响一些旧版本IE和Safari中可用的javascript属性。

可见性:隐藏对象仍然占据垂直高度的页面。与显示:无它是完全删除。如果你在图片下面有文字，并且你设置了display:none，那么文字会向上移动以填充图片所在的位置。如果你做可见性:隐藏文本将保持在相同的位置。

这里有很多详细的答案，但我认为我应该加上这一点来解决可访问性问题，因为其中有影响。

显示:没有;可见性:隐藏;可能不是所有屏幕阅读器软件都能读取。记住视力受损的用户将会经历什么。

这个问题还问了同义词。indent: -9999 px;是另一个大致相等的。文本缩进的重要区别在于它通常由屏幕阅读器读取。这可能是一个有点糟糕的体验，因为用户仍然可以点击链接。

对于可访问性，我现在看到的是一种样式的组合，在对屏幕阅读器可见的情况下隐藏元素。

{
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

一个很好的做法是创建一个“跳转到内容”链接到内容主体的锚。视力受损的用户可能不想在每个页面上都听完整的导航树。使链接在视觉上隐藏。用户只需点击标签就可以访问链接。

有关可访问性和隐藏内容的更多信息，请参见:

https://webaim.org/techniques/css/invisiblecontent/ https://webaim.org/techniques/skipnav/

另一个区别是可见性:hidden在非常非常老的浏览器中有效，而display:none则不行:

https://www.w3schools.com/cssref/pr_class_visibility.asp

https://www.w3schools.com/cssref/pr_class_display.asp