Is there any downside to using height: 0px; overflow: hidden; instead of display: none?

Question

Is there any downside to using height: 0px; overflow: hidden; instead of display: none?

Answer 1

The display CSS property is built into a lot more methods, e.g. .show() and .hide() for starters (among many others, for example you can't just call .slideDown() anymore to show the element). Aside from that, most browsers optimize display: none better, if any parent has display: none; it need not render the element, so it can speed up things quite a bit ignoring these elements.

More important than all of the jQuery parts: stepping back a minute from both a CSS and JavaScript standpoint, why not use the property provided explicitly for this purpose? :)

Answer 2

I think logically it is cleaner to use display:none since that correctly describes the intent. Using a 0-height object with clipping (overflow:hidden) will not be visible, but may still take up space in the page, since it has width. It may also be more expensive to render, depending upon the browser, since the browser may attempt to render the element and then clip to an empty rectangle.

Answer 3

You might need the former If you need to give focus to or register input from a hidden input, such as a textarea. Other than that, you should use the display: none descriptor for its intended purpose.