خاصیت display مشخص می‌کنه یک عنصر HTML در صفحه چطور نمایش داده بشه.
هر عنصر در HTML به‌صورت پیش‌فرض یا block یا inline هست، اما با display می‌تونیم اون رو تغییر بدیم.

1️⃣ مقادیر اصلی display

🔸 block

• کل عرض موجود رو می‌گیره.

• همیشه از خط جدید شروع می‌شه.

• می‌تونیم بهش width و height بدیم.

div {
  display: block;
}

🔸 inline

• فقط به اندازه محتوای خودش جا می‌گیره.

• کنار عناصر دیگه قرار می‌گیره.

• بهش width و height نمی‌شه داد.

span {
  display: inline;
}

🔸 inline-block

• مثل inline کنار بقیه قرار می‌گیره،

• اما مثل block می‌تونیم width و height براش تعریف کنیم.

img {
  display: inline-block;
}

2️⃣ مقادیر پیشرفته

🔸 flex

برای ساخت چیدمان انعطاف‌پذیر استفاده می‌شه.

.container {
  display: flex;
}

🔸 grid

برای طراحی‌های شبکه‌ای استفاده می‌شه.

.container {
  display: grid;
}

🔸 none

عنصر رو کاملاً از صفحه حذف می‌کنه (نه مثل visibility).

p {
  display: none;
}

3️⃣ مقادیر کمتر استفاده‌شده

• inline-flex → مثل inline در یک خط میاد، اما داخلش flexbox کار می‌کنه.

• inline-grid → مثل inline در یک خط میاد، اما داخلش grid کار می‌کنه.

• list-item → مثل <li> نمایش داده می‌شه.

• table, inline-table → مثل جدول HTML رفتار می‌کنه.

• table-row, table-cell → برای شبیه‌سازی ردیف‌ها و سلول‌های جدول.

4️⃣ تفاوت display و visibility

• display: none; → عنصر کلاً از صفحه حذف می‌شه.

• visibility: hidden; → عنصر مخفی می‌شه اما جاهاشو نگه می‌داره.

✅ خلاصه:

• block → کل خط

• inline → توی خط

• inline-block → ترکیب این دو

• flex / grid → برای چیدمان پیشرفته

• none → حذف از صفحه