CSS display:none and visibility:hidden

Question

I have a div that I use to display alerts when needed.

If I want to close it after a while can I use display:none or should I use display:none as well as visibility:

Answer 1

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

Answer 2

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.

Answer 3

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