What is the difference between visibility:hidden and display:none?

前端 未结 18 1656
余生分开走
余生分开走 2020-11-21 04:50

The CSS rules visibility:hidden and display:none both result in the element not being visible. Are these synonyms?

18条回答
  •  春和景丽
    2020-11-21 05:15

    They are not synonyms.

    display:none removes the element from the normal flow of the page, allowing other elements to fill in.

    visibility:hidden leaves the element in the normal flow of the page such that is still occupies space.

    Imagine you are in line for a ride at an amusement park and someone in the line gets so rowdy that security plucks them from the line. Everyone in line will then move forward one position to fill the now empty slot. This is like display:none.

    Contrast this with the similar situation, but that someone in front of you puts on an invisibility cloak. While viewing the line, it will look like there is an empty space, but people can't really fill that empty looking space because someone is still there. This is like visibility:hidden.

提交回复
热议问题