display: none; ще скрие елементът така, че все едно изобщо го няма. Без да запазва мястото му в лейаута. Тоест, при използване на display: none; лейаутът ще се промени съобразно с освободеното място.
visibility: hidden; пак ще скрие елемента, но ще запази мястото му в лейаута без да го размества (лейаута).
Добра аналогия би била: с display: none; вземаме нещо от някъде и го махаме, пренареждайки останалите неща (ако е необходимо).
С visibility: hidden; само го правим невидимо, но то си е пак там, подобно на Невидимият, дето може да го пипнеш и без да го виждаш.
С display: none; човекът не става невидим, а по-скоро излиза от стаята.
Но и в двата случая, елементите остават в DOM-a и са достъпни с JavaSctipt.