پیش‌بینی inline-block در CSS؛ عرض مشخص داخل خط

گاهی عنصری می‌خواهیم که کنار همسایه‌ها قرار بگیره ولی width و height هم بپذیره. display:inline-block این ترکیب رو فراهم می‌کنه. بیرون عنصر مثل بخشی از خط رفتار می‌کنه و داخلش یک جعبه مستقل داریم. برای نشان‌های کوچک و مثال‌های آموزشی مفیده، هرچند برای چیدمان کامل صفحه ابزارهای Flexbox و Grid رو جلوتر می‌بینیم.

در مثال، نشان‌ها هرکدوم عرض مشخص دارن و کنار هم قرار می‌گیرن. فاصله کوچک بینشون ممکنه از فاصله‌های خود HTML بیاد؛ پس inline-block به معنای حذف خودکار فاصله متن نیست. خطای رایج برابر دانستن inline و inline-block است. در حالت اول width معمولاً عرض جعبه متن عادی رو کنترل نمی‌کنه، اما در حالت دوم این مقدار اعمال می‌شه. توی سؤال یک span با عرض و ارتفاع مشخص داریم. روی دو نکته تمرکز کن: آیا اندازه‌ها پذیرفته می‌شن و آیا خود نوع نمایش الزاماً عنصر رو به خط تازه می‌فرسته؟ فضای کافی در خط موجوده.

✍️ مثال حل‌شده:

<span class="token">الف</span> <span class="token">ب</span>
<style>.token { display:inline-block; width:60px; height:30px; }</style>

حالا نوبت توئه: span با display:inline-block و width:90px و height:32px در خطی با فضای کافی قرار دارد. کدام توضیح درست است؟ padding و border صفرند؛ وجود فضای کافی را فرض کن و رفتار را با display:block اشتباه نگیر.

فعالیت شما

span با display:inline-block و width:90px و height:32px در خطی با فضای کافی قرار دارد. کدام توضیح درست است؟ padding و border صفرند؛ وجود فضای کافی را فرض کن و رفتار را با display:block اشتباه نگیر.

مطالعهٔ این گام برای همه آزاد است

برای پاسخ‌دادن، بررسی پاسخ، ثبت پیشرفت و استفاده از دستیار باید شرایط شرکت در فعالیت‌ها را داشته باشید.

برای انجام فعالیت‌ها ابتدا این دوره‌های پیش‌نیاز را تکمیل کنید:

<!doctype html> <html lang="fa" dir="rtl"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>تمرین CSS</title></head> <body> <p>نشان <span class="token">وب</span> آماده است</p> </body> </html>

body{margin:0;padding:16px;font-family:Tahoma,Arial,sans-serif;direction:rtl;color:#1f2937;background:#f3f4f6}*{box-sizing:content-box} .token{display:inline-block;width:90px;height:32px;padding:0;border:0}

فعالیت شما

مطالعهٔ این گام برای همه آزاد است

کد اولیهٔ فعالیت

ظاهر صفحه (CSS)

گزینه‌های پیش‌بینی خروجی