درود، وقتتون بخیر.

وقتی از display: none; استفاده می‌کنید، یعنی یه عنصر رو کاملاً مخفی می‌کنید، طوری که نه تنها دیده نمیشه، بلکه اصلاً فضایی هم توی صفحه اشغال نمی‌کنه. این زمانی به درد می‌خوره که می‌خواید عنصری رو "موقتاً" پنهان کنید بدون اینکه کلاً حذفش کنید. مثلاً منوی کشویی یا فرمی که فقط در شرایط خاصی باید نشون داده بشه.

این خاصیت بیشتر توی تعاملات کاربری و جاهایی که نیاز دارید بخشی از صفحه بسته به عملکرد کاربر تغییر کنه (مثلاً با کلیک روی دکمه یا باز شدن یه پاپ‌آپ) کاربرد داره. فرقش با visibility: hidden; اینه که display: none; نه تنها عنصر رو مخفی می‌کنه، بلکه فضایی هم که باید اشغال می‌کرده رو آزاد می‌کنه. (مثلا برای ریسپانسیو سازی منو، یه روش اینه برای دسکتاپ یه مدل طراحی شه و برای موبایل مدل دیگه‌ای (چیدمان المان‌ها تغییر کنه و شکل ظاهری منو متفاوت‌تر شه) تا تو دیوایس‌های کوچیک هم به درستی نمایش داده باشه. در این حالت وقتی به سایز موبایل می‌رسیم منویی که برای دسکتاپ طراحی شده بود رو مخفی می‌کنیم با display: none; و بالعکس)