The difference between Display:none and Visibility:hidden in CSS

Difference Analysis

First of all, we all know that Display:none and Visibility:hidden can play the role of hiding elements.

The difference between the two is that the document flow is occupied

Display:none hidden elements while removing the space occupied by the elements in the document flow

Visibility:hidden hide elements without removing the space occupied by the elements in the document flow

Examples of differences

HTML Code

<span class= "One" > First area </span>
<span> Second Area </span>
<br/><br/>
<span class= "Three" > Third area </span>
<span> Fourth Area </span>

CSS Code

span {
Background-color:black;
padding:5px;
Color: #fff;
}
. One {
Display:none;
}
. Three {
Visibility:hidden;
}

From the image above, you can see

Using the first area of Display:none, the document stream has not been occupied in the current HTML

Use the third area of Visibility:hidden and still occupy the document stream
Results diagram