The visibility
property only tells the browser whether to show an element or not. It's either visible (visible
- you can see it), or invisible (hidden
- you can't see it).
The display
property tells the browser how to draw and show an element, if at all - whether it should be displayed as an inline
element (i.e. it flows with text and other inline elements) or a block
-level element (i.e. it has height and width properties that you can set, it's floatable, etc), or an inline-block
(i.e. it acts like a block box but is laid inline instead) and some others (list-item
, table
, table-row
, table-cell
, flex
, etc).
When you set an element to display: block
but also set visibility: hidden
, the browser still treats it as a block element, except you just don't see it. Kind of like how you stack a red box on top of an invisible box: the red box looks like it's floating in mid-air when in reality it's sitting on top of a physical box that you can't see.
In other words, this means elements with display
that isn't none
will still affect the flow of elements in a page, regardless of whether they are visible or not. Boxes surrounding an element with display: none
will behave as if that element was never there (although it remains in the DOM).
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.
Best Answer
display:none
means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.visibility:hidden
means that unlikedisplay:none
, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.For example:
Replacing
[style-tag-value]
withdisplay:none
results in:Replacing
[style-tag-value]
withvisibility:hidden
results in: