تفاوت بین 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; در والد