What is difference between display:none & visibility:hidden in CSS?

In CSS display:none & visibility:hidden are mainly used for hiding the tags.


display:none tags will not appear in page at all.

There will be no space allotted in between other tags. Although you can interact with it through DOM.

rajkumar | <p style="display:none;">Style in this tag</p> | rajkumar

OUTPUT for display:none:

rajkumar |  | rajkumar


visibility:hidden tags will not visible.

There will be space allotted in between other tags.

rajkumar | <p style="visibility:hidden;">Style in this tag</p> | rajkumar

OUTPUT for visibility:hidden

rajkumar |                                  | rajkumar.