Difference between display:none & visibility:hidden CSS property

I usually get confused between **display: none ** and visibility: hidden but I can say that after reading this short blog you will never get confused between them✌️. Let's say we have this code with 3 boxes of different colors index.html <div class="...