What are the differences between display and visibility in CSS?

A hidden layer should be used to create a non-gap scroll effect for an image a few days ago.
Copy the effects code of the previous text scrolling (no errors during text scrolling). The page is doubled, that is, the hidden layer.
After checking the CSS Manual, we found that the hidden content is different. One is to keep the physical space of the object, and the other is not to keep it.
Display: none
CSS1 hides objects. Unlike the hidden value of the visibility attribute, it does not reserve its physical space for hidden objects.
Visibility: hidden
Object hiding. Unlike the display property, this property retains the physical space occupied by the hidden object.
However, because visibility: hidden is used, the extended content is actually the DIV containing the image. Instead, it will be normal after using display: none. I always suspected that it was a matter of high settings. I didn't expect it to be so simple.