CSS: какая разница между visibility:hidden и display:none?

Ни в коем случае!

display:none означает, что элемент не будет появляется на странице вообще (хотя при этом он будет хранится в DOM как полноценный объект). Таким образом, он не будет занимать на экране места, и между предыдущим перед ним и следующим за ним не образуется никакого промежутка.

Свойство visibility:hidden же означает, что элемент есть на странице, просто он невидимый, но место занимает. Получается как-бы промежуток, равный его размерам.

Сейчас продемонстрирую на примере:

<div style="width:100px;height:40px;background:aqua;"></div>
<div style="width:100px;height:40px;display:none;"></div>
<div style="width:100px;height:40px;background:gray;"></div>

<div style="width:100px;height:40px;background:aqua;"></div>
<div style="width:100px;height:40px;visibility:hidden;"></div>
<div style="width:100px;height:40px;background:gray;"></div>