Разница между display: none и visibility: hidden в веб-разработке заключается в том, как они скрывают элементы:

1. display: none полностью убирает элемент из документа. 13 Он больше не занимает места, даже несмотря на то, что ещё находится в исходном коде. 1
2. visibility: hidden делает элемент невидимым в браузере, но он всё ещё остаётся на своём месте и занимает пространство. 13

Таким образом, display: none удаляет элемент из нормального потока страницы, позволяя другим элементам заполнить его, а visibility: hidden оставляет элемент в нормальном потоке страницы, при этом он всё ещё занимает место (то есть пространство этого элемента остаётся незанятым). 2