English 中文 العربية 日本語 Português

Bootstrap: المسافات

آخر تحديث: 2026-08-26

1. مقدمة الدرس

(1) المتطلبات المسبقة

(2) 🎯 ما ستتعلمه

(3) المشكلة

في الدرس السابق، بنيت أليس صفحة شخصية لكنها وجدت البطاقات مزدحمة جدًا والعناوين قريبة جدًا من النص — الطريقة التقليدية كانت ستتطلب كتابة margin-bottom: 1.5rem لكل عنصر.

(4) الحل

تُبسّط أصناف أدوات المسافات في Bootstrap كل هذا. توفر مجموعة من أصناف أدوات المسافات المبنية على rem تغطي جميع تركيبات الاتجاه لـ margin و padding، مما يتيح لك التحكم الدقيق في مسافات العناصر دون كتابة سطر CSS واحد. مع Bootstrap، يكفي mb-4 واحد.

لفهم الفكرة: نظام مسافات Bootstrap يشبه "مسطرة درجات" — كل رقم يمثل قيمة مقياس ثابتة (من 0.25rem إلى 3rem). فقط اختر الرقم، لا حاجة لتذكر قيم البكسل.

(5) الفائدة

بعد استخدام أصناف أدوات المسافات في Bootstrap، تستطيع أليس التحكم الدقيق في مسافات العناصر بأصناف بسيطة مثل mb-4 و p-3، وداعًا لرتابة CSS المكتوب يدويًا، مما يؤدي إلى تخطيط صفحة أنظف وأكثر كفاءة.

2. مقياس المسافات

يتراوح مقياس المسافات من 0 إلى 5، حيث يقابل كل رقم قيمة rem:

المقياس rem px (أساس 16px) التشبيه
0 0 0px لا مسافة
1 0.25 4px مسافة صغيرة جدًا
2 0.5 8px مسافة مدمجة
3 1 16px مسافة قياسية
4 1.5 24px مسافة كبيرة
5 3 48px مسافة كبيرة جدًا

بالإضافة إلى ذلك، يوجد auto.

3. الخاصية والاتجاه

قاعدة تسمية الصنف: {p|m}{t|b|s|e|x|y|blank}{0|1|2|3|4|5|auto}

TEXT 📖 للعرض فقط 
  m         t          3
  ^         ^          ^
  Property  Direction  Value
          (optional)
الجزء الخيارات المعنى
الخاصية m margin (هامش خارجي)
p padding (حشو داخلي)
الاتجاه t أعلى
b أسفل
s بداية (يسار، خاصية منطقية)
e نهاية (يمين، خاصية منطقية)
x يسار + يمين (أفقي)
y أعلى + أسفل (عمودي)
فارغ جميع الاتجاهات الأربعة

ملاحظة: يستخدم Bootstrap 5 الخصائص المنطقية s (بداية) و e (نهاية) بدلاً من l (يسار) و r (يمين) لدعم أفضل للغات RTL (من اليمين لليسار). في سياق العربية، s = يمين، e = يسار.

▶ مثال: عرض مقياس المسافات

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Spacing Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .box { background: #e9ecef; border: 1px solid #0d6efd; }
    .highlight { background: #0d6efd; color: #fff; text-align: center; }
  </style>
</head>
<body>
  <div class="container py-4">

    <!-- Margin bottom -->
    <div class="box">
      <div class="highlight mb-0">mb-0</div>
      <div class="highlight mb-1">mb-1 (4px)</div>
      <div class="highlight mb-2">mb-2 (8px)</div>
      <div class="highlight mb-3">mb-3 (16px)</div>
      <div class="highlight mb-4">mb-4 (24px)</div>
      <div class="highlight mb-5">mb-5 (48px)</div>
    </div>

    <hr>

    <!-- Padding all sides -->
    <div class="box p-0"><span>p-0</span></div>
    <div class="box p-3 mt-2"><span>p-3 (16px on all sides)</span></div>
    <div class="box p-5 mt-2"><span>p-5 (48px on all sides)</span></div>

  </div>
</body>
</html>
▶ جرّب الكود

النتيجة: تأثير مكوّنات Bootstrap 5.3 المنسقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا.

4. تركيبات المسافات الشائعة

أنماط المسافات الأكثر استخدامًا في التطوير الفعلي:

HTML 
<!-- Card list: spacing between cards -->
<div class="card mb-3">Card 1</div>
<div class="card mb-3">Card 2</div>
<div class="card mb-3">Card 3</div>

<!-- Section: vertical padding -->
<section class="py-5">Section with 48px top & bottom padding</section>

<!-- Button: margin around -->
<button class="btn btn-primary me-2">Save</button>
<button class="btn btn-secondary">Cancel</button>

<!-- Container: horizontal padding -->
<div class="px-4">Content with comfortable side padding</div>
▶ جرّب الكود

النتيجة: تأثير مكوّنات Bootstrap 5.3 المنسقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا.

النمط الاستخدام الشائع التأثير
مسافة البطاقات mb-3 16px فجوة بين البطاقات
مسافة الأقسام py-5 48px حشو علوي وسفلي
مسافة الأزرار me-2 8px فجوة بين الأزرار
حشو الحاوية px-4 24px حشو آمن يمين ويسار

5. التوسيط الأفقي: mx-auto

عندما يكون للعنصر عرض ثابت، يحقق mx-auto التوسيط الأفقي:

▶ مثال: التوسيط الأفقي

HTML 
<div style="width: 200px;" class="mx-auto bg-primary text-white text-center p-3">
  Centered block with mx-auto
</div>
▶ جرّب الكود

النتيجة: تأثير مكوّنات Bootstrap 5.3 المنسقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا. mx-auto يكافئ CSS margin-left: auto; margin-right: auto; ويُطبّق على جميع العناصر على مستوى الكتلة.

6. المسافات المتجاوبة

تدعم أصناف أدوات المسافات جميع لاحقات نقاط التوقف، مما يتيح مسافات مختلفة لأحجام شاشات مختلفة:

HTML 
<div class="p-3 p-md-5 bg-light">
  Resize the browser to see padding change at 768px breakpoint.
</div>
▶ جرّب الكود

النتيجة: تأثير مكوّنات Bootstrap 5.3 المنسقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا.

الاستخدام الجوال (xs) الجهاز اللوحي (md+)
p-3 p-md-5 16px 48px
mb-2 mb-lg-0 8px margin-bottom 0 margin-bottom
pt-4 pt-xl-5 24px padding-top 48px padding-top

7. مسافات gap

في تخطيطات Flexbox و Grid، يتحكم صنف gap في المسافة بين العناصر الفرعية:

HTML 
<div class="d-flex gap-3">
  <div class="bg-primary text-white p-3">Item 1</div>
  <div class="bg-primary text-white p-3">Item 2</div>
  <div class="bg-primary text-white p-3">Item 3</div>
</div>
▶ جرّب الكود

النتيجة: تأثير مكوّنات Bootstrap 5.3 المنسقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا.

صنف gap القيمة الوصف
gap-0 0 لا مسافة
gap-1 0.25rem صغيرة جدًا
gap-2 0.5rem مدمجة
gap-3 1rem قياسية
gap-4 1.5rem واسعة
gap-5 3rem كبيرة جدًا

8. المسافات وحشو الحاويات

100% 
graph TD
    A[Container padding: 0 12px] --> B[Row margin: 0 -12px]
    B --> C[Col 1 padding: 0 12px]
    B --> D[Col 2 padding: 0 12px]
    B --> E[Col 3 padding: 0 12px]

النتيجة: تأثير مكوّنات Bootstrap 5.3 المنسقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا.

الطبقة طريقة التحكم في المسافة الوصف
الحاوية حشو مدمج المحتوى لا يلامس الحواف
الصف هامش سالب يعوض حشو الحاوية
العمود حشو مدمج مزراب بين الأعمدة
الداخلي p-* / m-* مسافات دقيقة لعناصر المحتوى

(2) مرجع مقياس المسافات الكامل

المقياس rem px (أساس 16px) الاسم السيناريو المناسب
0 0 0px لا يوجد إزالة الهامش الافتراضي
1 0.25 4px صغير جدًا فجوة بين الأيقونة والنص
2 0.5 8px مدمج مسافات في مجموعات الأزرار
3 1 16px قياسي مسافة البطاقات، مسافة الفقرات
4 1.5 24px كبير مسافة الأقسام
5 3 48px كبير جدًا مسافة بين أقسام الصفحة
auto auto auto تلقائي التوسيط الأفقي

(3) نقاط توقف المسافات المتجاوبة

الاستخدام الجوال (<576px) الجهاز اللوحي (>=768px) سطح المكتب (>=992px) الشاشة الكبيرة (>=1200px)
p-3 p-md-4 p-lg-5 16px 24px 48px 48px
m-2 m-md-3 m-xl-4 8px 16px 16px 24px
px-2 px-lg-4 8px (يمين/يسار) 8px (يمين/يسار) 24px (يمين/يسار) 24px (يمين/يسار)
py-3 py-md-5 16px (أعلى/أسفل) 48px (أعلى/أسفل) 48px (أعلى/أسفل) 48px (أعلى/أسفل)
gap-2 gap-lg-4 8px 8px 24px 24px

▶ مثال: صفحة مسافات متجاوبة

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Spacing</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .demo-section { background: #f8f9fa; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="container">
    <!-- Hero: responsive padding -->
    <div class="bg-primary text-white text-center px-3 py-5 px-md-5 py-md-6 rounded">
      <h1 class="display-5">Responsive Spacing Demo</h1>
      <p class="mb-0">Resize the browser to observe spacing changes</p>
    </div>

    <!-- Cards: responsive gap -->
    <div class="row g-2 g-md-3 g-lg-4 mt-4">
      <div class="col-12 col-md-4">
        <div class="demo-section p-3 p-md-4">
          <h5>Card One</h5>
          <p class="mb-0 small">p-3 on mobile, p-4 on desktop</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="demo-section p-3 p-md-4">
          <h5>Card Two</h5>
          <p class="mb-0 small">Gap increases with breakpoint</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="demo-section p-3 p-md-4">
          <h5>Card Three</h5>
          <p class="mb-0 small">g-2 → g-3 → g-4</p>
        </div>
      </div>
    </div>

    <!-- Info bar -->
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-center bg-light p-3 p-md-4 mt-4 rounded">
      <span class="mb-2 mb-md-0">flex-column becomes flex-md-row</span>
      <button class="btn btn-primary">Click</button>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

النتيجة: تأثير مكوّنات Bootstrap 5.3 المنسقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا.

▶ مثال: مسافات تخطيط البطاقات

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Card Spacing</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h3 class="mb-4">Blog Article List</h3>

    <div class="card mb-3">
      <div class="card-body">
        <h5 class="card-title">Article Title One</h5>
        <p class="card-text text-muted small mb-2">January 15, 2026</p>
        <p class="card-text">This is a sample article demonstrating mb-3 spacing between cards.</p>
        <a href="#" class="btn btn-sm btn-primary">Read More</a>
      </div>
    </div>

    <div class="card mb-3">
      <div class="card-body">
        <h5 class="card-title">Article Title Two</h5>
        <p class="card-text text-muted small mb-2">January 14, 2026</p>
        <p class="card-text">Each card has a 16px bottom margin, making the list clear and readable.</p>
        <a href="#" class="btn btn-sm btn-outline-primary">Read More</a>
      </div>
    </div>

    <div class="card mb-4 p-4 bg-light border-0">
      <div class="row g-3">
        <div class="col-6">
          <div class="p-3 bg-primary text-white rounded text-center">py-3 inside</div>
        </div>
        <div class="col-6">
          <div class="p-3 bg-success text-white rounded text-center">g-3 gutter</div>
        </div>
      </div>
    </div>

    <div class="d-flex gap-2 justify-content-end">
      <button class="btn btn-secondary">Previous</button>
      <button class="btn btn-primary">Next</button>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

النتيجة: تأثير مكوّنات Bootstrap 5.3 المنسقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا.

▶ مثال: مسافات النماذج

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Spacing</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="row justify-content-center">
      <div class="col-12 col-md-8 col-lg-6">
        <h3 class="mb-4">User Registration</h3>

        <form>
          <div class="mb-3">
            <label for="name" class="form-label">Name</label>
            <input type="text" class="form-control" id="name" placeholder="Enter your name">
          </div>

          <div class="mb-3">
            <label for="email" class="form-label">Email</label>
            <input type="email" class="form-control" id="email" placeholder="name@example.com">
          </div>

          <div class="mb-3">
            <label for="pwd" class="form-label">Password</label>
            <input type="password" class="form-control" id="pwd">
            <div class="form-text text-muted mt-1">Password must be at least 8 characters long.</div>
          </div>

          <div class="mb-4 form-check">
            <input type="checkbox" class="form-check-input" id="agree">
            <label class="form-check-label" for="agree">Agree to Terms of Service</label>
          </div>

          <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary">Register</button>
            <button type="reset" class="btn btn-outline-secondary">Reset</button>
          </div>
        </form>

        <p class="text-muted small mt-4 mb-0">Tip: All input spacing is uniformly controlled using mb-3.</p>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

النتيجة: تأثير مكوّنات Bootstrap 5.3 المنسقة (مثل الأزرار، البطاقات، عرض الشرائح، الطي، إلخ). تستخدم الصفحة السمة الافتراضية لـ Bootstrap (فاتح) ونظام الشبكة المتجاوب افتراضيًا.

❓ أسئلة شائعة

س هل يمكن لعنصر استخدام أصناف مسافات متعددة؟ هل يؤثر الترتيب على النتيجة؟
ج نعم، ولا. class="mt-3 mb-4 p-2" يضبط هامش علوي 16px وهامش سفلي 24px وحشو 8px على جميع الجوانب في وقت واحد. في تتالي CSS، الأصناف المعرّفة لاحقًا تتجاوز السابقة إذا اختلفت القيم، لكن أصناف المسافات في Bootstrap لا تتعارض، لذا الترتيب لا يهم.
س p-5 هو 48px، وهو كبير جدًا. ماذا أفعل؟
ج هناك ثلاثة خيارات: (1) استخدم p-4 (24px) أو p-3 (16px)؛ (2) خصّص متغير CSS --bs-gutter-x لضبط مسافة الشبكة؛ (3) في المرحلة 5، عند تغطية تخصيص Sass، يمكنك تعديل متغير $spacer لإعادة تعريف المقياس بالكامل.
س لماذا يعمل mx-auto فقط على العناصر على مستوى الكتلة؟
ج margin: auto في مواصفات CSS يتطلب أن يكون للعنصر عرض محدد (أي شيء غير auto) وأن يكون على مستوى الكتلة (display: block). العناصر المضمّنة ليس لها مفهوم عرض، لذا mx-auto لا يعمل.
س هل يدعم Bootstrap الهوامش السالبة؟
ج يدعم Bootstrap هوامش سالبة محدودة. يوفر أصنافًا مثل m{n|s|e|t|b|x|y}-n{1|2|3|4|5}، مثل mt-n3 يعني هامش علوي سالب 1rem. تُستخدم الهوامش السالبة غالبًا لتعويض حشو الحاوية أو إنشاء تأثيرات التداخل. لاحظ أن القيم السالبة لا تنطبق على padding و gap، ولاحقات الاستجابة (مثل mt-md-n3) مدعومة أيضًا.
س كيف تعمل أصناف المسافات في العناصر المتداخلة؟
ج تؤثر أصناف المسافات فقط على العنصر الحالي ولا تُورّث. العناصر الفرعية لا ترث تلقائيًا p-* أو m-* من العنصر الأم. في السيناريوهات المتداخلة، الممارسة الشائعة هي: ضبط p-* على الحاوية الأم للحشو، و mb-* على العناصر الفرعية للمسافات. لاحقات نقاط التوقف المتجاوبة تعمل أيضًا في التداخل — class="px-3 px-md-5" يتصرف بشكل متسق عبر أحجام الشاشات المختلفة.

📖 ملخص

📝 تمارين

  1. ⭐ استخدم أصناف المسافات لبناء تخطيط ثلاث بطاقات: gap-3 بين البطاقات، p-4 داخل البطاقات، py-5 للحاوية الخارجية، وأضف mt-3 إضافيًا على البطاقة الأولى لمراقبة التأثير.
  2. ⭐⭐ أنشئ قسمًا بمسافات متجاوبة: px-3 py-4 على الجوال، px-5 py-5 على سطح المكتب.
  3. ⭐⭐⭐ أنشئ مجموعة أزرار متمركزة (mx-auto + d-flex + gap-2) بثلاثة أزرار بينها 8px مسافة.

الدرس السابق: الخطوط · الدرس التالي: Flexbox

Web-Tutorial.com

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

100%