display: Block، Inline، Inline-block، None

سه رفتار پایه‌ای که هر عنصر می‌تواند داشته باشد: display

وارد فصل پنجم شدیم؛ فصلی که به یکی از تأثیرگذارترین Propertyهای CSS اختصاص داره: display. این Property مشخص می‌کنه یک عنصر، از نظر رفتار چیدمانی، دقیقاً چطور در کنار عناصر دیگه قرار می‌گیره. بدون فهمیدن display، درک درست از Layout عملاً غیرممکنه.

display چه چیزی را کنترل می‌کند؟

Property به اسم display مشخص می‌کنه یک عنصر چه نوع جعبه‌ای تولید می‌کنه و این جعبه چطور نسبت به عناصر مجاورش رفتار می‌کنه؛ آیا کل عرض والد رو می‌گیره یا فقط به‌اندازه محتوای خودشه، آیا بعد از خودش یک شکست خط ایجاد می‌کنه یا نه، و آیا اصلاً روی صفحه نمایش داده می‌شه یا نه.

display: block

div {
  display: block;
}

عناصر Block این ویژگی‌ها رو دارن:

• همیشه یک خط جدید قبل و بعد از خودشون ایجاد می‌کنن؛ یعنی هیچ عنصر دیگه‌ای نمی‌تونه کنارشون (در همون خط) قرار بگیره.
• به‌طور پیش‌فرض، کل عرض موجود در والدشون رو اشغال می‌کنن (حتی اگه محتواشون کمتر از این عرض باشه).
• width و height روی این عناصر کاملاً قابل‌اعمال هستن.

<div>جعبه اول</div>
<div>جعبه دوم</div>

در این مثال، با اینکه هیچ CSS اضافه‌ای ننوشتیم، دو div زیر هم قرار می‌گیرن؛ چون div به‌طور پیش‌فرض مقدار display‌ش برابر block است.

تگ‌هایی که پیش‌فرض‌شان block است

تگ‌هایی مثل div، p، h1 تا h6، ul، li، section و article، به‌طور پیش‌فرض Display برابر block دارن (این مقدار پیش‌فرض از طریق User Agent Stylesheet تعیین می‌شه، همون‌طور که در فصل ۲ دیدیم).

display: inline

span {
  display: inline;
}

عناصر Inline رفتار کاملاً متفاوتی دارن:

• هیچ خط جدیدی قبل یا بعد از خودشون ایجاد نمی‌کنن؛ در همون جریان متن، کنار عناصر دیگه قرار می‌گیرن.
• فقط به‌اندازه محتوای واقعی‌شون فضا اشغال می‌کنن، نه بیشتر.
• width و height روی این عناصر هیچ تأثیری ندارند؛ اندازه‌شون کاملاً وابسته به محتواشونه.
• margin-top و margin-bottom هم روی این عناصر عملاً بی‌اثرن (برخلاف margin چپ و راست که به‌درستی اعمال می‌شن).

<p>این یک <span>متن هایلایت‌شده</span> در وسط جمله است.</p>

تگ span، بدون اینکه هیچ شکست خطی ایجاد کنه، دقیقاً در وسط جریان متن پاراگراف قرار می‌گیره؛ چون Display پیش‌فرضش inline است.

تگ‌هایی که پیش‌فرض‌شان inline است

تگ‌هایی مثل span، a، strong، em و img (با یک استثنای جزئی که در ادامه می‌بینیم)، به‌طور پیش‌فرض inline هستن.

display: inline-block

Inline-block ترکیبی از هر دو رفتار قبلیه:

• مثل Inline، در جریان متن قرار می‌گیره و باعث شکست خط نمی‌شه.
• مثل Block، امکان تعریف width، height و همچنین margin کامل (بالا و پایین هم) رو داره.

.badge {
  display: inline-block;
  width: 80px;
  height: 30px;
  background-color: navy;
  color: white;
  text-align: center;
}

<p>وضعیت: <span class="badge">فعال</span> در حال حاضر</p>

در این مثال، badge در وسط جریان متن قرار می‌گیره (مثل یه عنصر Inline)، ولی چون inline-block است، می‌تونیم عرض و ارتفاع دقیق و حتی margin بالا و پایین کامل براش تعریف کنیم؛ کاری که با display: inline ساده امکان‌پذیر نبود.

مقایسه کامل سه مقدار در یک جدول

ویژگی	block	inline	inline-block
ایجاد شکست خط	بله	خیر	خیر
پذیرش width و height	بله	خیر	بله
پذیرش margin بالا و پایین	بله	خیر	بله
عرض پیش‌فرض	کل عرض والد	به‌اندازه محتوا	به‌اندازه محتوا (مگر مشخص شود)

display: none

.hidden {
  display: none;
}

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

مقدار none کاملاً متفاوت از سه مقدار قبلیه: عنصر نه‌تنها از نظر بصری نامرئی می‌شه، بلکه کاملاً از جریان صفحه حذف می‌شه؛ یعنی هیچ فضایی هم اشغال نمی‌کنه، انگار که اصلاً در HTML وجود نداره. همون‌طور که در فصل بعد با جزئیات بیشتری می‌بینیم، این رفتار کاملاً متفاوت از visibility: hidden است.

یک مثال ترکیبی برای جمع‌بندی

.container {
  border: 1px solid #ccc;
}

.block-item {
  display: block;
  background-color: #e0f7fa;
}

.inline-item {
  display: inline;
  background-color: #fff9c4;
}

.inline-block-item {
  display: inline-block;
  width: 100px;
  height: 40px;
  background-color: #ffccbc;
}

<div class="container">
  <div class="block-item">جعبه Block</div>
  <span class="inline-item">متن Inline</span>
  <span class="inline-block-item">جعبه Inline-block</span>
  <span class="inline-block-item">جعبه دیگر</span>
</div>

در این مثال: block-item کل عرض را می‌گیرد و روی خط جدا قرار دارد؛ inline-item فقط به‌اندازه متنش فضا می‌گیرد و اندازه‌اش قابل کنترل نیست؛ اما دو inline-block-item، کنار هم (بدون شکست خط) قرار می‌گیرن و در عین حال عرض و ارتفاع دقیق‌شون کاملاً قابل تنظیمه.

نکات مهم

• هر تگ HTML یک مقدار display پیش‌فرض دارد، ولی این مقدار همیشه با CSS قابل‌تغییر است.
• روی عناصر inline، width، height و margin عمودی هیچ تأثیری ندارند.
• display: none عنصر را کاملاً از جریان صفحه حذف می‌کند؛ نه فقط مخفی می‌کند.

اشتباهات رایج

• تلاش برای تنظیم width یا height روی یک عنصر inline، بدون اینکه بدانیم این مقادیر بی‌اثر خواهند بود.
• استفاده از margin-top یا margin-bottom روی عناصر inline با انتظار ایجاد فاصله عمودی، در حالی که این مقادیر نادیده گرفته می‌شوند.
• قاطی کردن display: none با visibility: hidden؛ این تفاوت مهم را در درس بعدی همین فصل کامل بررسی می‌کنیم.

جمع‌بندی

Property به اسم display مشخص می‌کند یک عنصر چطور در چیدمان صفحه رفتار می‌کند. block باعث شکست خط و اشغال کل عرض والد می‌شود، inline در جریان متن قرار می‌گیرد ولی width و height را نمی‌پذیرد، inline-block ترکیبی از هر دو است (بدون شکست خط، ولی با پذیرش ابعاد دقیق)، و none عنصر را کاملاً از جریان صفحه حذف می‌کند. این چهار مقدار، پایه‌ی درک هر نوع چیدمانی در CSS هستند.