可见性:隐藏将元素保留在页面中，并占用该空间，但不显示给用户。

显示:无将在页面中不可用，不占用任何空间。

它们不是同义词。

Display:none将元素从页面的正常流程中移除，允许其他元素填充。

可见性:隐藏将元素留在页面的正常流程中，这样仍然会占用空间。

想象一下，你正在游乐园排队，排队的人非常吵闹，保安把他们从队伍中拉了出来。然后排队的每个人都向前移动一个位置来填补现在的空缺。这就像display:none。

与此类似的情况相比，如果你前面有人穿上了隐形斗篷。在观看这条线时，它看起来像有一个空白的空间，但人们无法真正填补那个空白，因为有人仍然在那里。这就像可见性:隐藏。

如果可视性属性设置为“hidden”，浏览器仍然会在页面上为内容占用空间，即使它是不可见的。 但是当我们将一个对象设置为“display:none”时，浏览器不会在页面上为其内容分配空间。

例子:

<div style="display:none">
Content not display on screen and even space not taken.
</div>

<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>

查看详细信息

可见性:隐藏将元素保留在页面中，并占用该空间，但不显示给用户。

显示:无将在页面中不可用，不占用任何空间。

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

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