تفاوت بین block ، inline و inline-block

قبل از اینکه inline-block رو توضیح بدیم، لازمه تفاوت حالت‌های مختلف رو بدونیم:

  • block:

    • کل عرض موجود رو می‌گیره.

    • همیشه از خط جدید شروع می‌شه.

    • مثال: <div>, <p>, <h1>

    • نمی‌تونیم دو عنصر block رو کنار هم قرار بدیم مگر با تغییر استایل.

  • inline:

    • فقط به اندازه محتوای خودش جا می‌گیره.

    • توی همون خط باقی می‌مونه.

    • مثال: <span>, <a>, <strong>

    • اما: نمی‌شه به راحتی عرض (width) و ارتفاع (height) براش تنظیم کرد.

  • inline-block:

    • مثل inline کنار هم قرار می‌گیره.

    • مثل block می‌شه براش عرض و ارتفاع مشخص کرد.

    • ترکیبی از مزایای هر دو حالت! ✅

🔹 مثال ساده

<!DOCTYPE html> <html lang="fa"> <head> <meta charset="UTF-8"> <title>inline-block Example</title> <style> .box { display: inline-block; width: 150px; height: 100px; margin: 10px; background-color: lightcoral; text-align: center; line-height: 100px; color: white; font-weight: bold; } </style> </head> <body> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </body> </html>

✅ نتیجه: سه باکس کنار هم قرار می‌گیرند، در حالی که می‌توانیم عرض و ارتفاع برای آن‌ها مشخص کنیم.

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

  • ساخت منوهای افقی (Navigation Bar)

  • چیدمان کارت‌ها یا باکس‌ها در یک ردیف

  • جایگزین ساده برای Flexbox یا Grid در پروژه‌های کوچک

📌 نکته مهم:
بین المنت‌های inline-block گاهی فاصله‌ی سفید (white space) ایجاد می‌شه (مثل یک فاصله بین کلمات).
راه‌حل‌ها:

  • حذف فاصله‌ها در HTML

  • یا استفاده از ویژگی font-size: 0; در والد