The CSS rules visibility:hidden
and display:none
both result in the element not being visible. Are these synonyms?
Css – the difference between visibility:hidden and display:none
cssvisibility
Related Topic
- Css – CSS parent selector
- Html – Maintain the aspect ratio of a div with CSS
- Html – How to style a
- Css – How to transition height: 0; to height: auto; using CSS
- Html – How to remove the space between inline/inline-block elements
- Css – What’s the difference between SCSS and Sass
- Html – Hide scroll bar, but while still being able to scroll
- Javascript – Is it possible to apply CSS to half of a character
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: