Was ist der Unterschied zwischen visibility:hidden und display:none?

Question

Die CSS-Regeln visibility:hidden y display:none führen beide dazu, dass das Element nicht sichtbar ist. Sind dies Synonyme?

Answer 1

Sie sind keine Synonyme - display: none entfernt das Element aus dem Fluss der Seite, und der Rest der Seite fließt, als ob es nicht da wäre.

visibility: hidden verbirgt das Element aus der Ansicht, aber nicht aus dem Seitenfluss, so dass es auf der Seite Platz findet.

Answer 2

display: none entfernt das Element vollständig von der Seite, und die Seite wird so aufgebaut, als ob das Element gar nicht vorhanden wäre.

Visibility: hidden lässt den Raum im Belegfluss, auch wenn Sie ihn nicht mehr sehen können.

Je nachdem, was Sie tun, kann dies einen großen Unterschied machen oder auch nicht.

Answer 3

Mit visibility:hidden das Objekt nimmt weiterhin vertikale Höhe auf der Seite ein. Mit display:none sie vollständig entfernt wird. Wenn Sie Text unter einem Bild haben und Sie tun display:none wird der Text nach oben verschoben, um den Raum zu füllen, in dem sich das Bild befand. Wenn Sie visibility:hidden wählen, bleibt der Text an der gleichen Stelle.

Answer 4

visibility:hidden bewahrt den Raum; display:none nicht.

Answer 5

display:none blendet das Element aus und verkleinert den Platz, den es eingenommen hat, während visibility:hidden blendet das Element aus und erhält den Platz für das Element. display:none wirkt sich auch auf einige der Eigenschaften aus, die in älteren Versionen von IE und Safari über Javascript verfügbar sind.