Diferencia entre "visibilidad: contraer" y "mostrar: ninguna"

¿Cuál es la diferencia entre visibility:collapsey display:none?

Version corta:

El primero se utiliza para ocultar completamente los elementos de la tabla. Este último se usa para ocultar completamente todo lo demás.

Versión larga :

visibility: collapseoculta un elemento por completo (para que no ocupe ningún espacio en el diseño), pero solo cuando el elemento es un elemento de tabla .

Si se usa en elementos que no sean elementos de tabla, visibility: collapseactuará como visibility: hidden. Esto hace que un elemento sea invisible, pero seguirá ocupando espacio en el diseño.

display: noneoculta un elemento por completo , por lo que no ocupa ningún espacio en el diseño, pero no debe usarse en elementos de tabla.

Referencia W3C

visibility: collapsese comporta exactamente como visibility: hiddenen la mayoría de los contextos de formato: el espacio requerido por el elemento está 'reservado' en el diseño, pero el elemento en sí no se representa, dejando un espacio en blanco donde habría estado.

Hay tres excepciones que conozco: filas de tabla, columnas de tabla y elementos flexibles, en los que se visibility: collapsecomporta como display: none, pero con una diferencia importante: el 'puntal'. Puede pensar en el puntal como un marcador de posición de tamaño cero, que no reclama ningún espacio propio en el proceso de diseño, pero sigue siendo parte de la estructura de formato y participa en algunos cálculos de tamaño.

Una fila de tabla contraída, por ejemplo, no ocupará ningún espacio vertical en la tabla, pero las columnas de la tabla seguirán dimensionadas "como si" la fila contraída y su contenido fueran realmente visibles. Esto es para evitar que las columnas se "tambaleen" cuando las filas se alternan hacia adentro y hacia afuera. Del mismo modo, un elemento flexible colapsado no ocupa ningún espacio a lo largo del eje principal, pero aún contribuye al tamaño transversal de la línea flexible.

'No usar display: nonecon tablas' es una regla valiosa, pero no cuenta toda la historia.

• Úselo display: nonesi no desea que sus elementos ocultos participen de ninguna manera en el proceso de diseño de la tabla (o línea flexible).
• Úselo visibility: collapsesi desea mostrar y ocultar elementos dinámicamente sin desestabilizar el diseño de la tabla (o línea flexible).

Aquí hay un fragmento de código que demuestra la diferencia entre display: noney visibility: collapsepara una fila de tabla:

.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>

visibility:collapsesolo debe usarse en tablas. En otros elementos actuará como un visibility:hidden.

visibility:hiddenocultar el elemento pero seguir ocupando el espacio del elemento mientras display:noneque ni siquiera mantendrá el espacio.

Recursos:

• w3schools.com - visibilidad
• w3schools.com - pantalla

Sobre el mismo tema:

• ¿Cuál es la diferencia entre visibilidad: oculta y pantalla: ninguna?
• Propiedades de CSS: visualización frente a visibilidad
• Visualización de CSS: ninguna y visibilidad: oculta
• ¿Opacidad: 0 tiene exactamente el mismo efecto que visibilidad: oculta?

visibility:collapsetiene un display:nonecomportamiento solo para elementos de tabla. En otros elementos, debería renderizarse como hidden.

También puede aplicar visibility: collapseen un elemento debajo de un contenedor flexbox (un elemento flexible). Actuará mientras lo aplica en un elemento con display: table-rowodisplay: table-column