مولد مقياس التباعد — نظام الـSpacing

التباعد المتسق هو سر واجهة المستخدم الجيدة. استبدل المسافات العشوائية بنظام رياضي منهجي.

مناهج مقياس التباعد

• أساس 4px: مضاعفات 4 (4، 8، 12، 16، 24، 32، 48، 64...)
• أساس 8px: مضاعفات 8 (8، 16، 24، 32، 48، 64، 80...)
• مقياس متدرج: محسوب بنسبة ثابتة

نظام Tailwind CSS للتباعد

يستخدم Tailwind مقياساً دقيقاً بأساس 4px: p-1=4px، p-2=8px، p-4=16px، p-8=32px...

مبادئ اتخاذ قرارات التباعد

• العناصر المرتبطة تكون أقرب (حشوة داخلية)
• الأقسام المستقلة أبعد (مسافة بين الأقسام)
• العناصر في نفس المستوى تأخذ نفس التباعد
• استخدم التباعد للتعبير عن التسلسل الهرمي

التنفيذ بمتغيرات CSS

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-8: 32px;
}