تفاوت بین block ، inline و inline-block
قبل از اینکه inline-block
رو توضیح بدیم، لازمه تفاوت حالتهای مختلف رو بدونیم:
-
block:
-
کل عرض موجود رو میگیره.
-
همیشه از خط جدید شروع میشه.
-
مثال:
<div>
,<p>
,<h1>
-
نمیتونیم دو عنصر block رو کنار هم قرار بدیم مگر با تغییر استایل.
-
-
inline:
-
فقط به اندازه محتوای خودش جا میگیره.
-
توی همون خط باقی میمونه.
-
مثال:
<span>
,<a>
,<strong>
-
اما: نمیشه به راحتی عرض (width) و ارتفاع (height) براش تنظیم کرد.
-
-
inline-block:
-
مثل inline کنار هم قرار میگیره.
-
مثل block میشه براش عرض و ارتفاع مشخص کرد.
-
ترکیبی از مزایای هر دو حالت! ✅
-
🔹 مثال ساده
✅ نتیجه: سه باکس کنار هم قرار میگیرند، در حالی که میتوانیم عرض و ارتفاع برای آنها مشخص کنیم.
🔹 کاربردهای inline-block
-
ساخت منوهای افقی (Navigation Bar)
-
چیدمان کارتها یا باکسها در یک ردیف
-
جایگزین ساده برای Flexbox یا Grid در پروژههای کوچک
📌 نکته مهم:
بین المنتهای inline-block
گاهی فاصلهی سفید (white space) ایجاد میشه (مثل یک فاصله بین کلمات).
راهحلها:
-
حذف فاصلهها در HTML
-
یا استفاده از ویژگی
font-size: 0;
در والد