تفاوت display: inline و display: inline-block در CSS

مقدمه

ویژگی display: inline-block روش جدیدی برای ایجاد باکس‌هایی در کنار یکدیگر فراهم کرد که با توجه به فضای موجود، به‌درستی کنار هم قرار می‌گیرند یا به خط بعدی منتقل می‌شوند. این روش بسیاری از چیدمان‌هایی را که قبلاً با float انجام می‌شد، ساده‌تر کرده است و دیگر نیازی به پاک‌سازی (clear) فلوت‌ها نیست.

در مقایسه با display: inline، مهم‌ترین تفاوت این است که در inline-block می‌توان برای عنصر عرض (width) و ارتفاع (height) تعیین کرد. همچنین در حالت inline، فاصله‌های بالا و پایین (margin و padding) به‌طور کامل رعایت نمی‌شوند، اما در inline-block این فاصله‌ها به‌درستی اعمال می‌شوند.

از طرف دیگر، تفاوت inline-block با block این است که عناصر block پس از خود یک خط جدید ایجاد می‌کنند و بنابراین در کنار سایر عناصر قرار نمی‌گیرند.

display: inline

در این حالت:

• عرض (width) و ارتفاع (height) نادیده گرفته می‌شوند.
• فاصله‌های بالا و پایین (padding-top و padding-bottom) روی متن اطراف تأثیر نمی‌گذارند و ممکن است روی خطوط دیگر هم‌پوشانی داشته باشند.
• عنصر در همان خط متن باقی می‌ماند.

span.box {
  display: inline;
  width: 100px;
  height: 160px;
  padding: 18px;
}

ویژگی‌ها

✅ در کنار متن قرار می‌گیرد
❌ عرض و ارتفاع اعمال نمی‌شوند
❌ حاشیه و پدینگ عمودی رفتار محدودی دارند

display: inline-block

در این حالت:

• عرض و ارتفاع کاملاً اعمال می‌شوند.
• پدینگ و مارجین به‌درستی محاسبه می‌شوند.
• عناصر همچنان می‌توانند در کنار یکدیگر قرار بگیرند.

span.box {
  display: inline-block;
  width: 100px;
  height: 160px;
  padding: 18px;
}

ویژگی‌ها

✅ عرض و ارتفاع اعمال می‌شوند
✅ مارجین و پدینگ به‌درستی کار می‌کنند
✅ عناصر کنار هم قرار می‌گیرند

display: block

در این حالت:

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

span.box {
  display: block;
  width: 100px;
  height: 160px;
  padding: 18px;
}

ویژگی‌ها

✅ عرض و ارتفاع اعمال می‌شوند
✅ مارجین و پدینگ کاملاً رعایت می‌شوند
❌ عناصر کنار هم قرار نمی‌گیرند
✅ هر عنصر در یک خط جدا نمایش داده می‌شود

خلاصه تفاوت‌ها

نتیجه‌گیری

اگر فقط می‌خواهید یک عنصر داخل متن قرار بگیرد، از inline استفاده کنید. اگر نیاز دارید عنصر هم در کنار سایر عناصر باشد و هم امکان تعیین عرض و ارتفاع داشته باشد، inline-block بهترین انتخاب است. زمانی که هر عنصر باید در یک خط جداگانه نمایش داده شود، از block استفاده کنید.

از همراهی شما با پارمین کلود سپاسگزاریم.