What is the difference between `display: none;` and `visibility: hidden;`

The difference between display: none; and visibility: hidden; lies in how each affects the layout of the webpage.

display: none; removes the element from the document flow. This means that the space the element occupied is no longer reserved, and other elements will take its place.
visibility: hidden; keeps the element in the document flow, but it is not visible. The space the element occupies remains reserved, and other elements will not take its place.

Here's an example demonstrating the difference:


    <style>
    .hide {
        display: none;
    }
    
    .invisible {
        visibility: hidden;
    }
    </style>

    <div class="hide">This text is hidden and won't take space.</div>
    <div class="invisible">This text is invisible but still takes up space.</div>
    <div>This text is visible.</div>

display visibility css hidden none layout document flow