انواع display در CSS و کاربردهای آن

ویژگی display در CSS تعیین می‌کند که عناصر چگونه در صفحه نمایش داده شوند. در ادامه، انواع display را به‌صورت ساده و کاربردی توضیح می‌دهم:

1. نمایش بلوکی (block)

عنصر را به‌صورت یک بلوک کامل نمایش می‌دهد.
کل عرض را اشغال می‌کند و از خط جدید شروع می‌شود.

مثال:

div {
  display: block;
}

عناصر پیش‌فرض بلوکی: <div>, <p>, <h1> تا <h6>, <section>, <article>, <footer>

2. نمایش درون‌خطی (inline)

عنصر درون خط باقی می‌ماند و فقط به اندازه محتوایش فضا می‌گیرد.
نمی‌توان به آن عرض (width) و ارتفاع (height) داد.

مثال:

span {
  display: inline;
}

عناصر پیش‌فرض درون‌خطی: <span>, <a>, <strong>, <em>

3. نمایش درون‌خطی بلوکی (inline-block)

مانند inline است، اما می‌توان عرض و ارتفاع را تغییر داد.

مثال:

button {
  display: inline-block;
  width: 100px;
  height: 40px;
}

کاربرد: دکمه‌ها، منوها، کارت‌های کوچک

4. نمایش نامرئی (none)

عنصر را به‌طور کامل از صفحه حذف می‌کند (فضایی هم اشغال نمی‌کند).

مثال:

.hidden {
  display: none;
}

کاربرد: مخفی کردن منوها، نمایش مشروط عناصر

5. نمایش فلکس (flex)

یک مدل چیدمان قوی برای کنترل موقعیت و اندازه فرزندان.

مثال:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

کاربرد: ساختارهای پیچیده مانند هدر، فوتر، لیست‌های افقی

6. نمایش گرید (grid)

چیدمان مبتنی بر شبکه برای کنترل بهتر جایگیری عناصر.

مثال:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

کاربرد: طراحی صفحه‌بندی‌های حرفه‌ای

7. نمایش محتوا (contents)

خود عنصر حذف می‌شود اما فرزندان آن باقی می‌مانند.

مثال:

.wrapper {
  display: contents;
}

کاربرد: وقتی می‌خواهید بدون تغییر ساختار HTML، عنصری را حذف کنید.

8. نمایش لیست (list-item)

عنصر را به شکل آیتم لیست (<li>) با نشانه‌گذاری نمایش می‌دهد.

مثال:

.custom-item {
  display: list-item;
}

کاربرد: سفارشی‌سازی لیست‌های نامرتب و مرتب

جمع‌بندی سریع

اگر تازه‌کار هستی، بیشتر از block، inline-block، flex و grid استفاده کن.