المقياس: كل وحدة = 0.25rem
<div class="p-1">0.25rem = 4px</div>
<div class="p-2">0.5rem = 8px</div>
<div class="p-4">1rem = 16px</div>
<div class="p-6">1.5rem = 24px</div>
<div class="p-8">2rem = 32px</div>
الرقم بعد الشرطة × 4 بكسل (مع الحجم الافتراضي للخط 16px). المقياس نفسه يعمل مع الحشو والهوامش والفراغات والعرض والارتفاع، فتتعلّمه مرة واحدة. وفي v4 تعمل كل الأرقام، حتى غير الشائعة مثل p-13، لأنها تُحسب من متغيّر واحد --spacing.
القاعدة العملية: استخدم مجموعة صغيرة (2 و4 و6 و8 و12 و16) في كل الموقع. المسافات المتناسقة هي أكثر ما يجعل التصميم يبدو "احترافيًا".
الحشو (Padding): المساحة داخل العنصر
<div class="p-4">كل الجهات</div>
<div class="px-6 py-2">أفقي 6، عمودي 2: شكل الزر المعتاد</div>
<div class="pt-8">أعلى فقط</div>
| البادئة | الجهة |
|---|---|
p- | كل الجهات |
px- وpy- | أفقي (اليمين واليسار)، عمودي (الأعلى والأسفل) |
pt- وpb- | أعلى، أسفل |
ps- وpe- | بداية السطر ونهايته (منطقي) |
الهامش (Margin): المساحة خارج العنصر
<div class="mt-8 mb-4">أعلى 8، أسفل 4</div>
<div class="mx-auto max-w-2xl">توسيط أفقي لحاوية محدودة العرض</div>
<div class="-mt-4">هامش سالب: يسحب العنصر للأعلى</div>
mx-auto مع عرض محدود هي الطريقة المعتادة لتوسيط حاوية المحتوى في الصفحة.
العربية: الخصائص المنطقية
في صفحة عربية (dir="rtl")، "البداية" هي اليمين. لو كتبت ml-4 (هامش يسار)، فهو يسار دائمًا، في العربية والإنجليزية. أما ms-4 (margin-inline-start) فهو بداية السطر: يمين في العربية، ويسار في الإنجليزية، تلقائيًا:
<div dir="rtl">
<img class="me-3 inline size-8 rounded-full" src="/a.jpg" alt=""> <!-- فراغ بعد الصورة: على يسارها -->
<span>براء</span>
</div>
| فيزيائي (ثابت) | منطقي (يتبع الاتجاه) |
|---|---|
ml- وmr- | ms- وme- |
pl- وpr- | ps- وpe- |
left- وright- | start- وend- |
text-left وtext-right | text-start وtext-end |
في المواقع العربية، أو ثنائية اللغة، استخدم المنطقية دائمًا. هكذا يعمل نفس الكود في الاتجاهين بلا تكرار.
الفراغ بين العناصر: gap
<div class="flex gap-4">
<button>حفظ</button>
<button>إلغاء</button>
</div>
<div class="grid grid-cols-3 gap-x-4 gap-y-8">...</div>
gap يضع فراغًا بين العناصر فقط، لا قبل الأول ولا بعد الأخير. هو الأفضل مع flex وgrid. وبديله القديم space-x-4 وspace-y-4 يضيف هوامش للأبناء، وما زال مفيدًا لقائمة عناصر عادية بلا flex.
الحشو أم الهامش؟
- الحشو جزء من العنصر: يأخذ لون خلفيته، ويوسّع منطقة النقر في الأزرار.
- الهامش خارجه: شفّاف، يبعد العنصر عن جيرانه.
- بين أبناء حاوية: استخدم
gapفي الأب بدل هامش على كل ابن.
أخطاء شائعة
ml-وmr-في موقع عربي: المسافة في الجهة الخطأ. استخدمms-وme-.- هوامش على كل ابن بدل
gap: يبقى هامش زائد بعد آخر عنصر. - قيم عشوائية (
p-[13px]وmt-[22px]): تكسر الإيقاع. التزم بالمقياس. mx-autoبلا عرض محدود: العنصر يملأ العرض كله، فلا يحدث توسيط.- الهوامش العمودية تندمج:
mb-8على عنصر وmt-8على التالي لا تعطيان 16 بل 8 (margin collapsing في CSS العادي). داخلflexوgridلا يحدث هذا، وgapيتجنّبه تمامًا.
🎯 التالي: الأحجام.