در CSS معمولاً با سه نوع رفتار نمایشی (display) برای عناصر روبه‌رو می‌شوید: inline، block و inline-block.

هرکدام از این حالت‌ها روی نحوه قرارگیری عناصر و تعاملشان با سایر عناصر صفحه اثر می‌گذارند. در این درس، تمرکز روی این است که inline-block چگونه کار می‌کند و چه تفاوتی با عناصر inline و block دارد.

1) رفتار عناصر Block

عناصر block-level مثل یک «بلوک» یا «ظرف بزرگ» رفتار می‌کنند و به طور پیش‌فرض:

• تمام عرضِ در دسترسِ والد را می‌گیرند.
• از خط جدید شروع می‌شوند (محتوای بعدی را به خط بعد می‌فرستند).
• معمولاً قابل تنظیم بودن width و height را دارند.

2) رفتار عناصر Inline

عناصر inline برعکس عناصر block:

• فقط به اندازه محتوای خود فضا اشغال می‌کنند.
• در جریان متن باقی می‌مانند و به خط جدید نمی‌روند.
• (در بسیاری از موارد) تنظیم width و height روی آن‌ها مثل block عمل نمی‌کند و ممکن است نادیده گرفته شود.

3) inline-block: ترکیبی از هر دو

inline-block یک حالت «ترکیبی» است:

• مثل inline در همان خط باقی می‌ماند و کنار عناصر دیگر قرار می‌گیرد.
• ولی مثل block اجازه می‌دهد width و height را تنظیم کنید.

پس تفاوت کلیدی inline و inline-block این است:

• در inline شما عملاً کنترل کامل روی اندازه (width/height) ندارید.
• در inline-block می‌توانید ابعاد را کامل کنترل کنید و در عین حال عنصر inline باقی می‌ماند.

مثال

index.html

<link href="styles.css" rel="stylesheet">
<div class="container">
  <span class="inline-block-element element1">Inline-Block</span>
  <span class="inline-block-element element2">Inline-Block</span>
</div>

در مثال بالا یک div با کلاس container داریم و داخلش دو span.

اگر برای spanها display: inline-block بگذارید و برایشان width و height تعیین کنید:

• دو عنصر کنار هم نمایش داده می‌شوند (رفتار inline)
• و در عین حال width/height اعمال می‌شود (رفتار block)

اما اگر display: inline-block; را حذف کنید و بقیه CSS را نگه دارید، spanها به رفتار پیش‌فرض خودشان یعنی inline برمی‌گردند، و در نتیجه:

• width و height معمولاً نادیده گرفته می‌شوند
• و عنصر فقط به اندازه متن داخلش فضا می‌گیرد

چرا inline-block کاربردی است؟

برای ساخت layoutهایی که می‌خواهید:

• چند آیتم کنار هم باشند
• ولی همزمان نیاز دارید ابعادشان دقیق کنترل شود
  (مثلاً دکمه‌ها، badgeها، کارت‌های کوچک کنار هم، آیتم‌های منو با اندازه مشخص)

سوالات (با پاسخ)

1) ویژگی کلیدی inline-block نسبت به inline چیست؟

پاسخ درست:

• Inline-block elements allow setting of height and width, unlike inline elements.

2) کدام سناریو برای inline-block مناسب‌تر است؟

پاسخ درست:

• When you want an element to remain inline but need to adjust its size.

3) inline-block چه زمانی با block متفاوت رفتار می‌کند؟

پاسخ درست:

• When you want the element to flow alongside text and other inline elements.