“可见性：折叠”和“显示：无”之间的区别答案

【问题标题】：Difference between "visibility:collapse" and "display:none"“可见性：折叠”和“显示：无”之间的区别
【发布时间】：2011-04-11 09:10:54
【问题描述】：

visibility:collapse 和 display:none 有什么区别？

【问题讨论】：

stackoverflow.com/q/42252682/3597276

标签： html css

【解决方案1】：

visibility:collapse 只能用于表格。在其他元素上，它将充当visibility:hidden。

visibility:hidden 隐藏元素但仍占用元素的空间，而display:none 甚至不会保留空间。

资源：

关于同一主题：

【讨论】：

【解决方案2】：

短版：

前者用于完全隐藏表格元素。后者用于完全隐藏其他所有内容。

加长版：

visibility: collapse 完全隐藏了一个元素（这样它就不会占用布局中的任何空间），但只有在the element is a table element 时才会如此。

如果在表格元素以外的元素上使用，visibility: collapse 的作用类似于visibility: hidden。这会使元素不可见，但它仍会占用布局中的空间。

display: none 隐藏了一个元素完全，所以它不会占用布局中的任何空间，但它不应该用在表格元素上。

W3C Reference

【讨论】：

这很有用，但对 display: none 不应在表格元素上使用的声明进行引用或解释将是一个很好的补充。
@MarkAmery 不使用display: none; 的一个很好的理由是因为它使用colspan 和rowspan 破坏了表格。

【解决方案3】：

visibility:collapse 仅对表格元素具有 display:none 行为。在其他元素上，它应该呈现为hidden。

【讨论】：

【解决方案4】：

visibility: collapse 在大多数格式化上下文中的行为与visibility: hidden 完全一样：元素所需的空间在布局中“保留”，但元素本身并未呈现，在本来应该存在的地方留下了空白空间。

我知道有三个例外：表格行、表格列和弹性项目，其中visibility: collapse 的行为类似于display: none，但有一个主要区别：“支柱”。您可以将 strut 视为一个大小为零的占位符，它在布局过程中不占用任何自己的空间，但仍然是格式化结构的一部分并参与一些大小计算。

例如，折叠的表格行不会占用表格中的任何垂直空间，但表格列的尺寸仍将“好像”折叠的行及其内容实际可见。这是为了防止列在行进出切换时“摆动”。同样，折叠的 flex 项目不占用主轴上的任何空间，但仍会影响 flex 线的交叉大小。

“不要在表格中使用display: none”是一条有价值的经验法则，但它并不能说明全部情况。

如果您不希望隐藏元素以任何方式参与表格（或柔性线）布局过程，请使用 display: none。
如果您想动态显示和隐藏元素而不破坏表格（或柔性线）布局，请使用 visibility: collapse。

这是一个代码 sn-p 演示 display: none 和 visibility: collapse 之间对于表格行的区别：

.show-right-border {
  border-right: 1px black solid;
}

<h3>visibility: collapse</h3>
<table class="show-right-border">
  <tr>
    <td>Short text.</td>
    <td style="visibility: collapse;">Loooooooooong text.</td>
  </tr>
</table>

<h3>display: none</h3>
<table class="show-right-border">
  <tr>
    <td>Short text.</td>
    <td style="display: none;">Loooooooooong text.</td>
  </tr>
</table>

【讨论】：

只有一个讲述完整的故事。 @Mathieu Renda，您应该编辑主要答案，添加所有这些知识。
visibility:collapse 不适用于 Safari 中的表格。我发现display:none 在表格行（包括在 Safari 中）上工作正常，尽管上面关于列宽的 cmets 是正确的

【解决方案5】：

您还可以将visibility: collapse 应用于弹性盒容器（弹性项目）下的元素。当您将其应用于具有display: table-row 或display: table-column 的元素时，它将起作用

【讨论】：