CSS display:none and visibility:hidden

眉间皱痕 提交于 2019-11-29 09:51:05

Depends. If you need the space to be left blank, that is, the space won't be taken up by other elements below or around it, you'll need visibility: hidden. Otherwise, use display: none, which will allow other elements to move into the element's place.

There's no reason to use both.

If your hidden content needs to be accessible—to those with screen readers, for example—then you should not use display: none or visibility: hidden, as both can potentially hide content from screen readers. Instead, you should use a more accessible approach, such as moving the content off screen with a negative margin. See the following links for more information:

456 Berea Street: Hiding with CSS: Problems and solutions
WebAIM Blog: Hiding content for screen readers

Visibility:hidden hides the element but it still takes up space in the layout. Display:none removes it completely.

In your case, I would use Display:none

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!