margin فضای بیرون خط دور عنصره. برای اینکه یک کارت از همسایه‌اش فاصله بگیره می‌تونیم از این ویژگی استفاده کنیم، بدون اینکه اندازه نوشته یا فاصله داخلی کارت عوض بشه. ویژگی‌های margin-left و margin-right در این درس عمداً جدا نوشته می‌شن تا جهت فاصله‌ها روشن باشه. margin-top و margin-bottom هم به ترتیب فاصله بالا و پایین هستن.
مثال، فقط سمت چپ یک نشان فاصله می‌ذاره. توی تمرین، مقدارهای صریح برای چند سمت می‌خواهیم و بحث وسط‌چین‌کردن خودکار هنوز مطرح نیست. خطای رایج استفاده از padding به‌جای margin است؛ در اون حالت سطح رنگی بزرگ‌تر می‌شه و محتوا از لبه داخلی دور می‌ره، اما فاصله بیرونی موردنظر ساخته نمی‌شه. برای ساده‌بودن بررسی، عنصر فعالیت از نوع inline-block است؛ پس با ادغام فاصله‌های عمودی بلوک‌ها درگیر نمی‌شیم. هر سمت رو مستقل بررسی کن و به این توجه داشته باش که مقدار صفر هم یک تصمیم مشخص در طراحی محسوب می‌شه.
✍️ مثال حل‌شده:
<span class="tag">راهنما</span>
<style>.tag { display:inline-block; margin-left:12px; background:white; }</style>
حالا نوبت توئه: روی .spaced مقدار margin-right را ۲۴، margin-left را ۸ و margin-top را صفر پیکسل قرار بده. display:inline-block و padding:10px موجود را حفظ کن. هدف فاصله بیرونی است؛ این سه مقدار را با padding جایگزین نکن و عنصر را حذف نکن.
فعالیت شما
روی .spaced مقدار margin-right را ۲۴، margin-left را ۸ و margin-top را صفر پیکسل قرار بده. display:inline-block و padding:10px موجود را حفظ کن. هدف فاصله بیرونی است؛ این سه مقدار را با padding جایگزین نکن و عنصر را حذف نکن.