9

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:hidden?

So one or both.

Thank you.

Alex W
  • 37,233
  • 13
  • 109
  • 109
Francisc
  • 77,430
  • 63
  • 180
  • 276

3 Answers3

18

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.

Yi Jiang
  • 49,435
  • 16
  • 136
  • 136
6

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

6

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

Mike
  • 21,301
  • 2
  • 42
  • 65
  • 1
    Just curious, but why exactly would you want to hide content but still have it be accessible to screen readers? If it's hidden, it's because I don't currently want it shown. – Maverick Mar 21 '14 at 02:59
  • 1
    @MrN00b You might be hiding content for aesthetic reasons, such as collapsable sections that the user can hide or reveal. – Mike Mar 23 '14 at 11:12