Unterschied zwischen "Sichtbarkeit: Zusammenbruch" und "Anzeige: Keine"

Was ist der Unterschied zwischen visibility:collapseund display:none?

Kurzfassung:

Ersteres wird verwendet, um Tabellenelemente vollständig auszublenden. Letzteres wird verwendet, um alles andere vollständig zu verbergen.

Lange Version :

visibility: collapseBlendet ein Element vollständig aus (damit es keinen Platz im Layout einnimmt), sondern nur, wenn das Element ein Tabellenelement ist .

Wenn es für andere Elemente als Tabellenelemente verwendet visibility: collapsewird, verhält es sich wie folgt visibility: hidden. Dies macht ein Element unsichtbar, nimmt jedoch weiterhin Platz im Layout ein.

display: noneBlendet ein Element vollständig aus , sodass es keinen Platz im Layout einnimmt, sollte jedoch nicht für Tabellenelemente verwendet werden.

W3C-Referenz

visibility: collapseverhält sich genau wie visibility: hiddenin den meisten Formatierungskontexten: Der vom Element benötigte Platz ist im Layout "reserviert", aber das Element selbst wird nicht gerendert, sodass an der Stelle, an der es gewesen wäre, ein Leerzeichen verbleibt.

Es gibt drei Ausnahmen, die ich kenne: Tabellenzeilen, Tabellenspalten und Flex-Elemente, die visibility: collapsesich wie verhalten display: none, aber mit einem großen Unterschied: der 'Strebe'. Sie können sich die Strebe als einen Platzhalter mit der Größe Null vorstellen, der im Layoutprozess keinen eigenen Platz beansprucht, aber dennoch Teil der Formatierungsstruktur ist und an einigen Größenberechnungen teilnimmt.

Eine reduzierte Tabellenzeile nimmt beispielsweise keinen vertikalen Platz in der Tabelle ein, aber die Tabellenspalten werden weiterhin so dimensioniert, als ob die reduzierte Zeile und ihr Inhalt tatsächlich sichtbar wären. Dies soll verhindern, dass Spalten beim Ein- und Ausschalten von Zeilen "wackeln". Ebenso nimmt ein zusammengeklapptes Flex-Element keinen Platz entlang der Hauptachse ein, trägt aber dennoch zur Quergröße der Flex-Linie bei.

"Nicht display: nonemit Tabellen verwenden" ist eine wertvolle Faustregel, die jedoch nicht die ganze Geschichte erzählt.

• Verwenden display: noneSie diese Option, wenn Sie nicht möchten, dass Ihre versteckten Elemente in irgendeiner Weise am Layoutprozess der Tabelle (oder der flexiblen Linie) beteiligt sind.
• Verwenden visibility: collapseSie diese Option, wenn Sie Elemente dynamisch anzeigen und ausblenden möchten, ohne das Layout der Tabelle (oder der flexiblen Linie) zu destabilisieren.

Hier ist ein Codefragment, das den Unterschied zwischen display: noneund visibility: collapsefür eine Tabellenzeile zeigt:

.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:collapsesollte nur für Tabellen verwendet werden. Auf anderen Elementen wird es als visibility:hidden.

visibility:hiddenBlenden Sie das Element aus, nehmen Sie jedoch den Platz des Elements ein, während display:noneder Platz nicht einmal beibehalten wird.

Ressourcen:

• w3schools.com - Sichtbarkeit
• w3schools.com - Anzeige

Zum gleichen Thema:

• Was ist der Unterschied zwischen Sichtbarkeit: versteckt und Anzeige: keine
• CSS-Eigenschaften: Anzeige vs. Sichtbarkeit
• CSS-Anzeige: keine und Sichtbarkeit: ausgeblendet
• Hat Deckkraft: 0 genau den gleichen Effekt wie Sichtbarkeit: versteckt

visibility:collapsehat ein display:noneVerhalten nur für Tabellenelemente. Auf anderen Elementen sollte es als rendern hidden.

Sie können visibility: collapseein Element auch unter einem Flexbox-Container (einem Flex-Element) anwenden . Es verhält sich so, als würden Sie es auf ein Element mit display: table-rowoder anwendendisplay: table-column