Difference between visibility hidden and display none?

Both do the job of hiding a portion of web page differently and are not interchangeable.

Please check the below example to clear the difference between visibility hidden and display none.

Like

visibility: hidden; this will hide the entity but space will still be allocated. Means if you want to hide something then that will hide but space of that portion remains their.

<p> This will be shown <b style="visibility: hidden;"> This Will Be hidden</b> 
This is the tail end</p>

This will be shown This Will Be hidden This is the tail end

but

display: none; will remove the entity and the the space allocated to it. Means it will hide the portion and also hide that portion area.

<p> This will be shown <b style="display: none;"> This Will Be hidden</b> 
This is the tail end</p>

This will be shown This Will Be hidden This is the tail end