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

این ویژگی برای کنترل چیدمان عناصر، تنظیم فاصله‌ها، نمایش یا مخفی کردن المان‌ها و ایجاد طرح‌های پیچیده مانند Flexbox و Grid کاربرد دارد.

در این مقاله، انواع مقادیر display و نحوه‌ی استفاده از آن‌ها را بررسی خواهیم کرد.

۱. مقادیر پرکاربرد display در CSS

ویژگی display دارای چندین مقدار مختلف است که هرکدام رفتار خاصی دارند:

۲. بررسی مقادیر مختلف display با مثال

۱. block – نمایش به‌صورت بلوک کامل

• عناصر بلوک به‌طور پیش‌فرض کل عرض موجود را اشغال می‌کنند.
• عناصر جدید در یک خط جدید قرار می‌گیرند.

✅ مثال:

.block-element {
    display: block;
    background-color: lightblue;
    padding: 10px;
}

<div class="block-element">این یک عنصر بلوک است.</div>
<div class="block-element">این نیز یک عنصر بلوک است.</div>

🔹 در این مثال، هر div در یک خط جداگانه نمایش داده می‌شود.

✅ عناصر پیش‌فرض block در HTML:

• <div>
• <p>
• <h1> تا <h6>
• <section>، <article>، <nav>، <footer>، <header>

۲. inline – نمایش درون خطی (هم‌ردیف شدن عناصر)

• عنصرهای inline فقط به اندازه‌ی محتوای خود فضا اشغال می‌کنند.
• عناصر جدید در یک خط قرار می‌گیرند و مانند متن رفتار می‌کنند.

✅ مثال:

.inline-element {
    display: inline;
    background-color: lightgreen;
    padding: 5px;
}

<span class="inline-element">متن ۱</span>
<span class="inline-element">متن ۲</span>

🔹 این دو عنصر در یک خط قرار خواهند گرفت.

✅ عناصر پیش‌فرض inline در HTML:

• <span>
• <a>
• <strong>، <em>، <b>

۳. inline-block – ترکیبی از inline و block

• عنصر مانند inline در یک خط باقی می‌ماند.
• اما مانند block، می‌توان برای آن عرض، ارتفاع، padding و margin تنظیم کرد.

✅ مثال:

.inline-block-element {
    display: inline-block;
    width: 100px;
    height: 50px;
    background-color: orange;
    text-align: center;
}

<div class="inline-block-element">Box 1</div>
<div class="inline-block-element">Box 2</div>

🔹 در این مثال، هر باکس در کنار هم نمایش داده می‌شود اما می‌توان برای آن‌ها عرض و ارتفاع تنظیم کرد.

۴. none – مخفی کردن عنصر از صفحه

• عنصر کاملاً از صفحه حذف می‌شود (فضای آن نیز ناپدید می‌شود).
• در مقایسه با visibility: hidden که فقط عنصر را پنهان می‌کند اما فضای آن را حفظ می‌کند.

✅ مثال:

.hidden {
    display: none;
}

<p class="hidden">این پاراگراف نمایش داده نمی‌شود.</p>

🔹 عنصر از صفحه حذف خواهد شد.

📌 کاربردها: نمایش/عدم نمایش المان‌ها با جاوااسکریپت، مخفی کردن منوهای کشویی، تغییر نمایش فرم‌ها و…

۵. flex – طراحی منعطف با Flexbox

• flex یکی از بهترین روش‌ها برای طراحی ریسپانسیو و منعطف است.
• کنترل چیدمان، فاصله‌ها و جهت قرارگیری عناصر را آسان می‌کند.

✅ مثال:

.flex-container {
    display: flex;
    justify-content: space-between;
    background-color: lightgray;
    padding: 10px;
}

.flex-item {
    width: 100px;
    height: 50px;
    background-color: dodgerblue;
    text-align: center;
    color: white;
    line-height: 50px;
}

<div class="flex-container">
    <div class="flex-item">Box 1</div>
    <div class="flex-item">Box 2</div>
    <div class="flex-item">Box 3</div>
</div>

🔹 تمام باکس‌ها در یک ردیف نمایش داده می‌شوند.

📌 برای طراحی‌های واکنش‌گرا و مدیریت چیدمان بسیار مفید است.

۶. grid – طراحی چیدمان دو‌بعدی با CSS Grid

• grid برای طراحی چیدمان‌های پیچیده و چند ستونه بسیار قدرتمند است.
• امکان کنترل کامل ردیف‌ها و ستون‌ها را فراهم می‌کند.

✅ مثال:

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    background-color: lightgray;
    padding: 10px;
}

.grid-item {
    background-color: coral;
    padding: 20px;
    text-align: center;
}

<div class="grid-container">
    <div class="grid-item">Box 1</div>
    <div class="grid-item">Box 2</div>
    <div class="grid-item">Box 3</div>
</div>

🔹 هر باکس به‌صورت خودکار در یک شبکه‌ی ۳ ستونه قرار می‌گیرد.

📌 CSS Grid برای چیدمان‌های پیچیده بسیار ایده‌آل است.

۷. مقایسه‌ی مهم‌ترین مقادیر display

۸. نتیجه‌گیری

• ویژگی display کنترل نحوه‌ی نمایش عناصر در صفحه را فراهم می‌کند.
• block، inline و inline-block برای چیدمان‌های ساده استفاده می‌شوند.
• flex و grid روش‌های پیشرفته و مدرن برای طراحی صفحات واکنش‌گرا هستند.
• none برای مخفی کردن عناصر از صفحه استفاده می‌شود.

✅ انتخاب مقدار مناسب display باعث بهینه‌سازی طراحی و بهبود تجربه‌ی کاربری می‌شود. 🚀