المسافات: الحشو والهوامش

إتقان المسافات في Tailwind CSS

تعد المسافات من أهم جوانب تصميم الويب الأساسية. يمكن أن يؤدي الاستخدام الصحيح للحشو والهوامش إلى إحداث فرق بين واجهة مزدحمة يصعب قراءتها وتصميم نظيف واحترافي. يوفر Tailwind CSS نظام مسافات بديهي يسهل إنشاء تخطيطات متسقة ومتوازنة.

مقياس المسافات في Tailwind

يستخدم Tailwind مقياس مسافات رقمي حيث تمثل كل وحدة 0.25rem (4px افتراضياً). وهذا يخلق إيقاعاً متسقاً في جميع أنحاء تصميمك:

0   = 0px
1   = 0.25rem  (4px)
2   = 0.5rem   (8px)
3   = 0.75rem  (12px)
4   = 1rem     (16px)
5   = 1.25rem  (20px)
6   = 1.5rem   (24px)
8   = 2rem     (32px)
10  = 2.5rem   (40px)
12  = 3rem     (48px)
16  = 4rem     (64px)
20  = 5rem     (80px)
24  = 6rem     (96px)
32  = 8rem     (128px)
40  = 10rem    (160px)
48  = 12rem    (192px)
56  = 14rem    (224px)
64  = 16rem    (256px)
72  = 18rem    (288px)
80  = 20rem    (320px)
96  = 24rem    (384px)
px  = 1px

أدوات الحشو (Padding)

يضيف الحشو مساحة داخلية ضمن العنصر. يوفر Tailwind أدوات حشو شاملة لجميع الجوانب:

<!-- تطبيق الحشو على جميع الجوانب -->
<div class="p-4">حشو متساوي على جميع الجوانب</div>
<div class="p-8">المزيد من الحشو على جميع الجوانب</div>
<div class="p-0">بدون حشو</div>

<!-- مثال على زر شائع -->
<button class="p-3 bg-blue-500 text-white rounded">
  انقر هنا
</button>

الحشو الاتجاهي

يمكنك تطبيق الحشو على جوانب محددة باستخدام الأدوات الاتجاهية:

<!-- الحشو من الأعلى -->
<div class="pt-4">حشو علوي فقط</div>

<!-- الحشو من اليمين -->
<div class="pr-6">حشو أيمن فقط</div>

<!-- الحشو من الأسفل -->
<div class="pb-8">حشو سفلي فقط</div>

<!-- الحشو من اليسار -->
<div class="pl-2">حشو أيسر فقط</div>

<!-- دمج عدة جوانب -->
<div class="pt-8 pb-4 pl-6">
  حشو مختلف على جوانب مختلفة
</div>

الحشو الأفقي والعمودي

يوفر Tailwind أدوات مختصرة للحشو الأفقي (يسار + يمين) والعمودي (أعلى + أسفل):

<!-- الحشو الأفقي (يسار + يمين) -->
<div class="px-4">حشو على اليسار واليمين</div>
<div class="px-8">المزيد من الحشو الأفقي</div>

<!-- الحشو العمودي (أعلى + أسفل) -->
<div class="py-4">حشو على الأعلى والأسفل</div>
<div class="py-12">المزيد من الحشو العمودي</div>

<!-- دمج px و py -->
<div class="px-6 py-4">
  6 وحدات أفقياً، 4 وحدات عمودياً
</div>

<!-- نمط بطاقة شائع -->
<div class="px-6 py-8 bg-white rounded-lg shadow">
  <h3 class="text-xl font-bold">عنوان البطاقة</h3>
  <p class="mt-2">محتوى البطاقة مع حشو متسق</p>
</div>

أدوات الهامش (Margin)

تُنشئ الهوامش مساحة خارج العنصر، مما يدفعه بعيداً عن العناصر المجاورة. يعكس التركيب أدوات الحشو:

<!-- تطبيق الهامش على جميع الجوانب -->
<div class="m-4">هامش متساوي على جميع الجوانب</div>
<div class="m-8">المزيد من الهامش على جميع الجوانب</div>
<div class="m-0">بدون هامش</div>

<!-- المسافة بين العناصر -->
<div class="space-y-4">
  <p class="m-0">الفقرة الأولى</p>
  <p class="m-0">الفقرة الثانية</p>
  <p class="m-0">الفقرة الثالثة</p>
</div>

الهوامش الاتجاهية

<!-- الهامش من الأعلى -->
<h2 class="mt-8">عنوان مع هامش علوي</h2>

<!-- الهامش من اليمين -->
<span class="mr-2">نص</span><span>المزيد من النص</span>

<!-- الهامش من الأسفل -->
<p class="mb-4">فقرة مع هامش سفلي</p>

<!-- الهامش من اليسار -->
<div class="ml-6">محتوى مُسَنَّن</div>

<!-- نمط طباعة شائع -->
<article>
  <h1 class="text-3xl font-bold mb-2">عنوان المقال</h1>
  <p class="text-gray-600 mb-6">نُشر في 15 يونيو 2025</p>
  <p class="mb-4">الفقرة الأولى...</p>
  <p class="mb-4">الفقرة الثانية...</p>
  <p class="mb-0">الفقرة الأخيرة (بدون هامش سفلي)</p>
</article>

الهوامش الأفقية والعمودية

<!-- الهامش الأفقي (يسار + يمين) -->
<div class="mx-4">هامش على اليسار واليمين</div>
<div class="mx-8">المزيد من الهامش الأفقي</div>

<!-- الهامش العمودي (أعلى + أسفل) -->
<div class="my-4">هامش على الأعلى والأسفل</div>
<div class="my-12">المزيد من الهامش العمودي</div>

<!-- دمج mx و my -->
<div class="mx-auto my-8 max-w-2xl">
  حاوية مركزية مع مسافة عمودية
</div>

الهوامش التلقائية للتوسيط

واحدة من أقوى أدوات الهامش هي mx-auto، والتي تُوَسِّط عناصر مستوى الكتلة:

<!-- توسيط حاوية -->
<div class="mx-auto max-w-4xl">
  حاوية محتوى مركزية
</div>

<!-- توسيط صورة -->
<img src="logo.png" class="mx-auto" alt="الشعار">

<!-- دفع العنصر إلى اليمين -->
<div class="ml-auto">محاذاة لليمين</div>

<!-- تخطيط صفحة شائع -->
<div class="mx-auto max-w-7xl px-4">
  <header class="py-6">
    <nav class="flex items-center justify-between">
      <div>الشعار</div>
      <div class="ml-auto">التنقل</div>
    </nav>
  </header>
</div>

الهوامش السالبة

يدعم Tailwind أيضاً الهوامش السالبة، والتي تسحب العناصر في الاتجاه المعاكس:

<!-- هامش سالب لتداخل العناصر -->
<div class="relative">
  <img src="bg.jpg" class="w-full" alt="الخلفية">
  <div class="-mt-16 mx-auto max-w-2xl bg-white rounded-lg shadow-xl p-8">
    هذه البطاقة تتداخل مع الصورة أعلاه
  </div>
</div>

<!-- هامش سالب للمحاذاة الدقيقة -->
<div class="flex items-center">
  <span class="-ml-1">مسحوب قليلاً لليسار</span>
</div>

<!-- الخروج من الحاوية -->
<div class="max-w-4xl mx-auto px-4">
  <div class="-mx-4">
    هذا يمتد إلى حواف حشو الوالد
  </div>
</div>

<!-- نمط تداخل الصورة الرمزية -->
<div class="flex -space-x-2">
  <img src="avatar1.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="المستخدم 1">
  <img src="avatar2.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="المستخدم 2">
  <img src="avatar3.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="المستخدم 3">
</div>

أدوات المسافة بين (Space Between)

تضيف أدوات space-x و space-y مسافات متسقة بين العناصر الفرعية:

<!-- إضافة مسافة أفقية بين الأبناء -->
<div class="flex space-x-4">
  <button>زر 1</button>
  <button>زر 2</button>
  <button>زر 3</button>
</div>

<!-- قائمة تنقل -->
<nav class="flex space-x-6">
  <a href="#">الرئيسية</a>
  <a href="#">من نحن</a>
  <a href="#">الخدمات</a>
  <a href="#">اتصل بنا</a>
</nav>

<!-- مجموعة أزرار -->
<div class="flex space-x-2">
  <button class="px-4 py-2 bg-blue-500 text-white rounded">حفظ</button>
  <button class="px-4 py-2 bg-gray-500 text-white rounded">إلغاء</button>
</div>

<!-- إضافة مسافة عمودية بين الأبناء -->
<div class="space-y-4">
  <div class="bg-gray-100 p-4 rounded">عنصر 1</div>
  <div class="bg-gray-100 p-4 rounded">عنصر 2</div>
  <div class="bg-gray-100 p-4 rounded">عنصر 3</div>
</div>

<!-- تخطيط مقال -->
<article class="space-y-4">
  <h1 class="text-3xl font-bold">عنوان المقال</h1>
  <p>الفقرة الأولى...</p>
  <p>الفقرة الثانية...</p>
  <p>الفقرة الثالثة...</p>
</article>

<!-- تخطيط نموذج -->
<form class="space-y-6">
  <div>
    <label class="block mb-2">الاسم</label>
    <input type="text" class="w-full px-3 py-2 border rounded">
  </div>
  <div>
    <label class="block mb-2">البريد الإلكتروني</label>
    <input type="email" class="w-full px-3 py-2 border rounded">
  </div>
  <button class="px-6 py-2 bg-blue-500 text-white rounded">إرسال</button>
</form>

المسافة السالبة بين العناصر

تماماً مثل الهوامش، يمكنك استخدام المسافة السالبة بين العناصر لتأثيرات التداخل:

<!-- الصور الرمزية المتداخلة أفقياً -->
<div class="flex -space-x-4">
  <img src="user1.jpg" class="w-12 h-12 rounded-full border-2 border-white" alt="المستخدم 1">
  <img src="user2.jpg" class="w-12 h-12 rounded-full border-2 border-white" alt="المستخدم 2">
  <img src="user3.jpg" class="w-12 h-12 rounded-full border-2 border-white" alt="المستخدم 3">
  <img src="user4.jpg" class="w-12 h-12 rounded-full border-2 border-white" alt="المستخدم 4">
</div>

<!-- تأثير البطاقات المكدسة -->
<div class="-space-y-2">
  <div class="bg-white p-4 rounded-lg shadow">بطاقة 1</div>
  <div class="bg-white p-4 rounded-lg shadow">بطاقة 2</div>
  <div class="bg-white p-4 rounded-lg shadow">بطاقة 3</div>
</div>

أمثلة عملية للمسافات

<div class="max-w-sm mx-auto">
  <div class="bg-white rounded-lg shadow-lg overflow-hidden">
    <img src="card-image.jpg" class="w-full h-48 object-cover" alt="بطاقة">
    <div class="p-6">
      <div class="flex items-center mb-4">
        <img src="avatar.jpg" class="w-10 h-10 rounded-full mr-3" alt="المؤلف">
        <div>
          <p class="font-semibold">محمد أحمد</p>
          <p class="text-sm text-gray-600">منذ ساعتين</p>
        </div>
      </div>
      <h3 class="text-xl font-bold mb-2">عنوان البطاقة</h3>
      <p class="text-gray-700 mb-4">
        هذا وصف بطاقة مع مسافات مناسبة بين العناصر
        لتحقيق قابلية القراءة المثلى والتسلسل الهرمي البصري.
      </p>
      <div class="flex space-x-2">
        <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
          اقرأ المزيد
        </button>
        <button class="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300">
          مشاركة
        </button>
      </div>
    </div>
  </div>
</div>

أفضل الممارسات للمسافات

الملخص

في هذا الدرس، تعلمت:

• مقياس المسافات في Tailwind (0-96 بالإضافة إلى px)
• أدوات الحشو: p-*، pt-*، pr-*، pb-*، pl-*، px-*، py-*
• أدوات الهامش: m-*، mt-*، mr-*، mb-*، ml-*، mx-*، my-*
• الهوامش التلقائية للتوسيط: mx-auto، ml-auto، mr-auto
• الهوامش السالبة لتأثيرات التداخل
• أدوات المسافة بين: space-x-* و space-y-*
• أنماط المسافات العملية لمكونات واجهة المستخدم الشائعة

المسافات المناسبة ضرورية لإنشاء واجهات احترافية وقابلة للقراءة. في الدرس التالي، سنستكشف أدوات التحجيم للتحكم في العرض والارتفاع وأبعاد العناصر.