Spacing رابطه عناصر را به چشم نشان می‌دهد. فاصله کم می‌تواند بخش‌های مرتبط را نزدیک نگه دارد و فاصله بیشتر مرز گروه‌ها را روشن کند. این تصمیم را با قاعده «همه چیز مضرب هشت» یکی نکنید. مقیاس عددی به ثبات کمک می‌کند، اما محتوای واقعی، Typography، اندازه کنترل و عرض صفحه هم تعیین‌کننده‌اند. یک فایل با همه فاصله‌های هشت‌پیکسلی هنوز می‌تواند Label را از فیلد جدا یا دکمه را به گروه نامربوط نزدیک نشان دهد.
برای مثال فرضی فرم ثبت درخواست، عنوان و توضیح یک گروه‌اند و Label و input گروه کوچک‌تری می‌سازند. فاصله میان دو فیلد باید از فاصله Label تا کنترل بیشتر باشد تا رابطه خوانده شود. فضای پایان بخش نیز می‌تواند مرز مرحله را مشخص کند. این‌ها تصمیم‌های نسبی‌اند و عدد نهایی باید با فونت و اندازه محصول هماهنگ شود. مقیاس مشترک زمانی مفید است که همین رابطه‌ها را بیان کند، نه فقط فهرست عددها را کوتاه کند.
مقیاس را از نیاز و محدودیت بسازید
سیستم فاصله Carbon نمونه‌ای از مقیاس دارای مقدارهای کوچک و بزرگ است و از مضرب‌های دو، چهار و هشت استفاده می‌کند. این قرارداد برای همان سیستم است و قانون همه طراحی‌ها نیست. می‌توانید با مجموعه کوچک شروع کنید و نقش هر مقدار را مشخص کنید. مقدارهای بسیار نزدیک و بی‌نام، انتخاب را سخت می‌کنند؛ اما حذف هر استثنا به دلیل زیبا بودن جدول عددها هم هدف مناسبی نیست.
نام معنایی مثل فاصله داخل Card یا فاصله بین Sectionها می‌تواند از وابستگی همه مصرف‌کنندگان به یک عدد مستقیم بکاهد. مقدار پایه و نقش معنایی دو لایه متفاوت‌اند. اگر Density تغییر می‌کند، شاید بعضی فاصله‌های داخلی کم شوند و مرز گروه‌ها همچنان واضح بماند. مقاله Design System درباره Token و نگهداری قرارداد توضیح دارد. تعریف Token باید با مصرف واقعی باشد و برای هر مقدار اتفاقی نام مشترک نسازد.
فاصله بیرونی و درونی را جدا کنید
Padding فضای داخل عنصر است و Margin رابطه بیرونی را کنترل می‌کند. gap میان آیتم‌های یک Container کاربرد دارد و جای Padding دور ظرف نیست. یک Card می‌تواند Padding داخلی و مجموعه Cardها gap جدا داشته باشد. اگر همه فاصله از Margin فرزند ساخته شود، رفتار ابتدا و انتهای ظرف ممکن است سخت‌تر فهمیده شود. پیش از اصلاح عدد، مشخص کنید مالک فاصله کدام عنصر است و چه رابطه‌ای قرار است نشان داده شود.
در CSS بعضی Marginها می‌توانند Collapse شوند و نتیجه جمع ساده اعداد نباشد. استفاده از Flex یا Grid رفتار دیگری دارد. مقاله Flexbox عملی درباره والد و فرزند مستقیم کمک می‌کند. ساختار مناسب می‌تواند فاصله را قابل پیش‌بینی کند، اما Layout نباید فقط برای خاموش کردن یک مشکل تصادفی انتخاب شود. رابطه Content، Container و مسئولیت فاصله را بنویسید تا تغییر Wrapper جدید قرارداد را نامعلوم نکند.
Typography بخشی از ریتم است
Line-height، طول سطر و فاصله پاراگراف با Spacing صفحه کار می‌کنند. اگر متن چندخطی شد، فاصله میان گروه‌ها نباید از بین برود. تیتر با یک خط لاتین و تیتر دوخطی فارسی ارتفاع یکسانی ندارند. فاصله نوری هم ممکن است با Bounding Box عنصر متفاوت دیده شود؛ حروف و آیکون‌ها فضای داخلی دارند. تنظیم دقیق باید با محتوای واقعی انجام شود و صرف قرار گرفتن روی Grid، هم‌ترازی ادراکی را تضمین نمی‌کند.
معیار Text Spacing در WCAG درباره تحمل تغییر فاصله متن بدون از دست رفتن محتوا یا عملکرد توضیح می‌دهد. این معیار الزام به یک فاصله پیش‌فرض خاص برای همه متن‌ها نیست؛ کاربر باید بتواند تنظیم مربوط را تغییر دهد و رابط نشکند. ارتفاع ثابت روی کنترل دارای متن بلند می‌تواند مشکل بسازد. فضای کافی و رفتار Wrap مناسب، از بریدن محتوا در تغییر فونت یا Zoom جلوگیری می‌کند.
نمونه کامل رابطه گروه و کنترل
فایل زیر را spacing-demo.html ذخیره و مستقیم در مرورگر باز کنید. HTML و CSS لازم در همان فایل است و وابستگی خارجی ندارد. دو گروه فرم و یک خلاصه دارد. مقادیر فاصله با rem نوشته شده‌اند تا رابطه با اندازه متن پایه روشن باشد. این مقیاس آموزشی است و استاندارد اجباری هشت‌پیکسل معرفی نمی‌شود. دکمه فقط پیام محلی نشان می‌دهد و هیچ داده‌ای ذخیره یا ارسال نمی‌کند؛ هدف مشاهده ساختار فاصله است.
<!doctype html><html lang="fa" dir="rtl"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>نمونه Spacing</title><style>
:root{--space-field:.5rem;--space-group:1.5rem;--space-section:2.5rem;--space-padding:1.5rem}*{box-sizing:border-box}body{font:1rem/1.8 Tahoma,sans-serif;margin:0;padding:1rem;background:#eee;color:#111}main{max-width:40rem;margin-inline:auto;padding:var(--space-padding);background:white;display:grid;gap:var(--space-section)}h1,h2,p{margin:0}.section{display:grid;gap:var(--space-group)}.fields{display:grid;gap:var(--space-group)}.field{display:grid;gap:var(--space-field)}input,button{font:inherit;padding:.5rem .75rem;border:2px solid #111}input{width:100%;min-width:0}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}input:focus-visible,button:focus-visible{outline:3px solid #111;outline-offset:3px}.summary{padding:1rem;border:2px solid #111}
</style></head><body><main><header class="section"><h1>درخواست آموزشی</h1><p>این فرم فقط ساختار فاصله را نشان می‌دهد و داده ارسال نمی‌کند.</p></header><form class="section" id="form"><h2>اطلاعات نمونه</h2><div class="fields"><div class="field"><label for="title">عنوان پروژه</label><input id="title" aria-describedby="title-help"><p id="title-help">عنوانی کوتاه و روشن وارد کنید؛ این توضیح بخشی از همان فیلد است.</p></div><div class="field"><label for="time">زمان مورد انتظار</label><input id="time" aria-describedby="time-help"><p id="time-help">زمان آموزشی است و تعهد واقعی ایجاد نمی‌کند.</p></div></div><div class="actions"><button>نمایش پیام محلی</button><p>ثبت پایدار انجام نمی‌شود.</p></div></form><section class="summary" aria-label="خلاصه"><p id="status" role="status">هنوز اقدامی انجام نشده است.</p></section></main><script>document.getElementById('form').onsubmit=event=>{event.preventDefault();document.getElementById('status').textContent='پیام محلی نمایش داده شد؛ داده ذخیره یا ارسال نشده است.'};</script></body></html>
field برای Label، input و راهنما gap کوچک دارد و fields میان دو فیلد فاصله بیشتر می‌گذارد. section میان عنوان و گروه و container میان دو بخش فاصله جدا دارد. در actions، دکمه و توضیح رابطه مشترک دارند و می‌توانند Wrap شوند. مقدارها با نقش نام‌گذاری شده‌اند. تغییر space-field روی فاصله داخلی هر فیلد اثر دارد و نباید با تغییر space-section که مرز بخش‌ها را کنترل می‌کند یک هدف تلقی شود.
در این نمونه، ارتفاع کنترل از Padding و متن می‌آید و ثابت قفل نشده است. Label و راهنما با تغییر طول می‌توانند چندخطی شوند. متن خلاصه در یک سطح جدا قرار گرفته تا گروهش مشخص بماند. برای تمرین، طول Label و توضیح را زیاد کنید و سپس فقط یک Token را تغییر دهید تا اثر همان رابطه دیده شود. Selectorها با HTML متناظرند و اضافه کردن کلاس تازه بدون عنصر، بخشی از رفتار نمونه ایجاد نمی‌کند.
ریتم به معنی تکرار بی‌تفاوت نیست
فاصله تکراری برای عناصر هم‌نقش کمک می‌کند، اما تیتر بخش، هشدار و پاراگراف معمولی لازم نیست جایگاه یکسانی داشته باشند. ریتم می‌تواند با تغییر کنترل‌شده مرزهای اصلی را نشان دهد. اگر هر فاصله متفاوت است، خواننده الگو را سخت‌تر پیدا می‌کند؛ اگر همه یکسان‌اند، سلسله‌مراتب از دست می‌رود. معیار، فهم گروه‌بندی است. تشبیه به موسیقی می‌تواند توضیحی باشد، اما نباید جای مشاهده رابطه متن و کنترل را بگیرد.
در جدول متراکم، فاصله باید همراه قابلیت مرور و انتخاب باشد. کاهش Padding همه ردیف‌ها شاید داده بیشتری در قاب بیاورد و انتخاب لمسی را سخت کند. مقاله جدول داده درباره همین رابطه توضیح دارد. Density را به عنوان حالت مشخص تعریف کنید و همه کنترل‌ها را بی‌قید کوچک نکنید. اطلاعات اصلی، Focus و هدف کلیک باید قابل استفاده بمانند و صرف تعداد ردیف بیشتر معیار بهبود نباشد.
Responsive و RTL مالک فاصله را تغییر نمی‌دهند
در عرض کم، بعضی ردیف‌ها به ستون تبدیل می‌شوند و فاصله باید با محور تازه هماهنگ باشد. gap مشترک ممکن است کافی باشد یا نقش‌های افقی و عمودی متفاوت لازم شوند. از propertyهای منطقی برای شروع و پایان استفاده کنید تا RTL به اصلاح پراکنده چپ و راست وابسته نشود. فاصله میان Icon و متن با فاصله گروه‌ها متفاوت است. اگر Icon جهت‌دار است، معنا و جهت باید با ترتیب محتوا بررسی شوند.
Viewport بزرگ هم نباید فاصله‌ها را بدون سقف زیاد کند. Container و طول سطر باید با خواندن متن هماهنگ باشند. فضای خالی زیاد در صفحه کوتاه می‌تواند گروه‌ها را بیش از نیاز جدا نشان دهد. مقاله Grid و Flexbox درباره انتخاب مدل چیدمان زمینه دارد. عدد فاصله از رابطه و محل مصرف می‌آید؛ زیاد کردن آن برای ساخت ظاهر لوکس، کیفیت فهم اطلاعات را خودکار بهتر نمی‌کند.
حالت‌ها و محتوای ناقص را هم ببینید
پیام خطا، Loading و نبود تصویر می‌توانند ارتفاع جزء را تغییر دهند. فاصله باید اجازه دهد پیام در همان گروه بماند و به کنترل بعدی نچسبد. حذف راهنما ممکن است فضای خالی نامناسب بگذارد اگر Layout به ارتفاع ثابت وابسته باشد. مقاله فرم وب درباره وضعیت‌ها کمک می‌کند. نمونه Default با متن کوتاه کافی نیست؛ رابطه را در حالت خطا و توضیح بلند نیز تعریف کنید.
در فایل طراحی، Auto Layout می‌تواند رابطه را بیان کند، اما خروجی کد باید همان تصمیم را اجرا کند. مقاله Figma و تحویل درباره ساختار و اندازه توضیح دارد. برای تحویل، بنویسید فاصله از کدام والد می‌آید و چه چیزی با تغییر محتوا رشد می‌کند. اندازه ثابت Screenshot را به عنوان تضمین رفتار همه متن‌ها تحویل ندهید؛ محدودیت و قاعده باید همراه ظاهر باشند.
قرارداد را با بازبینی نوری و معنایی نگه دارید
چند کاربرد واقعی از همان Component را کنار هم ببینید و اختلاف‌ها را با نقش بررسی کنید. اگر استثنا لازم است، دلیل آن را ثبت کنید تا به مقدار اتفاقی تازه تبدیل نشود. در سیستم، تعداد Tokenهای فاصله را محدود اما کافی نگه دارید. مقاله Atomic Design درباره ارتباط جزء و صفحه مفید است. یک مقدار مشترک زمانی ارزش دارد که مصرف‌کنندگان واقعاً رابطه مشترکی داشته باشند.
شروع مناسب یک فرم یا Card واقعی است: گروه‌های معنایی را تعیین کنید، مالک Margin، Padding و gap را بشناسید و سپس مقیاس کوچک را اعمال کنید. محتوا و اندازه متن را تغییر دهید و رابطه‌های شکسته را از ساختار اصلاح کنید. Spacing خوب با فاصله‌های هماهنگ و قابل توضیح ساخته می‌شود. مضرب بودن عدد می‌تواند ابزار نظم باشد و نباید به حکم درباره حرفه‌ای یا آماتور بودن همه طراحی‌ها تبدیل شود.
هنوز دیدگاهی ثبت نشده
اولین نفری باشید که نظر می‌دهد!