نمایش Inline-block

Inline-block چیست؟

inline-block ترکیبی از inline و block است — در خط قرار می‌گیرد اما برخلاف inline، به width، height، margin و padding عمودی پاسخ می‌دهد.

مقایسه سه نوع display

ویژگی	inline	block	inline-block
در خط جدید؟	❌	✅	❌
width/height	❌	✅	✅
margin عمودی	❌	✅	✅
پر کردن عرض	❌	✅	❌

مثال پایه

.badge {
        display: inline-block;
        padding: 8px 20px;
        background: #3498db;
        color: white;
        border-radius: 20px;
        width: auto;    /* به اندازه محتوا */
        height: auto;
    }

مشکل فاصله سفید (Whitespace Gap)

⚠️ عناصر inline-block بین خود فاصله (۴px) ایجاد می‌کنند:

<div class="box">A</div>
    <div class="box">B</div>
    <!-- فاصله ۴px بین آن‌هاست -->

راه‌حل‌های حذف فاصله

/* راه‌حل ۱: حذف فاصله در HTML */
    <div class="box">A</div><div class="box">B</div>
    
    /* راه‌حل ۲: float */
    .box { float: left; }
    
    /* راه‌حل ۳: Flexbox ⭐ */
    .container { display: flex; }
    
    /* راه‌حل ۴: font-size صفر روی والد */
    .parent { font-size: 0; }
    .box { font-size: 16px; }
    
    /* راه‌حل ۵: margin منفی */
    .box { margin-right: -4px; }

کاربردهای inline-block

• دکمه‌ها و نشان‌ها در خط
• منوهای افقی (قبل از Flexbox)
• کادرهای کوچک با ابعاد مشخص
• عناصر درون متن با استایل

بهترین شیوه‌ها

• برای منوها از Flexbox استفاده کنید، نه inline-block
• اگر از inline-block استفاده کردید، مشکل فاصله را حل کنید
• برای عناصر کوچک در خط (badge، tag)، inline-block عالی است
• Flexbox جایگزین بهتری برای اکثر کاربردهاست

نکات مهم

• فاصله ۴px بین inline-block‌ها به فونت والد بستگی دارد
• inline-block به width و height پاسخ می‌دهد (برخلاف inline)
• Flexbox مشکل فاصله سفید را ندارد
• برای تصاویر کوچک در متن، inline-block مفید است