الهوامش الخارجية (Margin)

إذا كان الـ Padding هو "وزن العنصر" الذي يملأه من الداخل، فإن الـ Margin هو "المساحة الشخصية" للعنصر التي تمنع الآخرين من الاقتراب منه. الـ Margin هو المسافة الشفافة الموجودة خارج حدود العنصر (Border). هو الأداة التي نستخدمها لإبعاد العناصر عن بعضها البعض، أو لتوسط العنصر في منتصف الصفحة، أو حتى لعمل تداخلات فنية بين الصور. في هذا الدرس الشامل، سنغطي كل شبر في خاصية الـ Margin، من الأساسيات وحتى الحيل الاحترافية.

1. مفهوم Margin (المنطقة المحرمة)

الـ Margin هو مساحة فارغة وشفافة تماماً تحيط بالعنصر من الخارج. تخيل أن كل عنصر في صفحتك هو شخص مصاب بالأنفلونزا، والـ Margin هو مسافة الأمان التي يجب أن يتركها بينه وبين الآخرين.

الشفافية: الـ Margin شفاف دائماً. لا يمكن تلوينه. هو يظهر لون "خلفية الصفحة" أو العنصر الأب الذي يحتوي العناصر.
الوظيفة: الدفع. الـ Margin يقوم بدفع العناصر المجاورة بعيداً.

2. التحكم في الجهات الأربع (Individual Sides)

مثل الـ Padding تماماً، يمكنك تحديد المارجن لكل جهة على حدة.

الخصائص المنفصلة

margin-top: لإبعاد العناصر التي فوقك.
margin-right: لإبعاد العناصر التي على يمينك.
margin-bottom: لإبعاد العناصر التي تحتك.
margin-left: لإبعاد العناصر التي على يسارك.

مثال: إبعاد البطاقات عن بعضها


.card {
    border: 1px solid black;
    
    /* دفع البطاقة للأسفل بمسافة 50 بيكسل */
    margin-top: 50px;
    
    /* إبعاد أي شيء على اليسار بمسافة 20 بيكسل */
    margin-left: 20px;
}

3. الاختصار (Shorthand) - نفس قواعد Padding

نستخدم نفس قاعدة "الساعة" التي تعلمناها في درس الـ Padding. الترتيب يبدأ من الأعلى ويدور يميناً.

تذكير سريع بالحالات

4 قيم: margin: 10px 20px 30px 40px; (فوق، يمين، تحت، يسار).
3 قيم: margin: 10px 50px 20px; (فوق، يمين/يسار، تحت).
2 قيم: margin: 20px 50px; (فوق/تحت، يمين/يسار).
1 قيمة: margin: 20px; (من جميع الجهات).

نصيحة للمحترفين: إذا كنت تريد تحريك عنصر لليمين قليلاً، لا تستخدم position، بل استخدم ببساطة margin-left.

4. السحر الحقيقي: التوسط التلقائي (margin: auto)

هذا هو الاستخدام الأشهر للـ Margin. كيف تجعل صندوقاً (div) يظهر في منتصف الصفحة أفقياً بالضبط؟

الحل يكمن في القيمة السحرية auto. عندما تعطي العنصر مارجن auto من اليمين واليسار، فإن المتصفح يقوم بحساب المساحة الفارغة المتبقية ويقسمها بالتساوي بين اليمين واليسار.

شروط نجاح التوسط

لكي تعمل margin: auto، يجب توفر شرطين:

يجب أن يكون للعنصر عرض محدد (width). (لأنه لو كان العرض 100%، لن تكون هناك مساحة فارغة لتقسيمها!).
يجب أن يكون العنصر من نوع Block.

كود توسيط العناصر (Center Div)


.container {
    width: 80%;       /* يجب تحديد عرض أقل من 100% */
    margin-left: auto;  /* خذ كل المساحة المتبقية يساراً */
    margin-right: auto; /* خذ كل المساحة المتبقية يميناً */
    
    /* الاختصار الشهير: */
    margin: 0 auto; /* 0 فوق وتحت، وتلقائي يمين ويسار */
    
    background-color: lightgray;
}

5. الهوامش السلبية (Negative Margins) - القوة الخفية

هل تعلم أن الـ Margin يقبل أرقاماً سالبة؟ (مثلاً -20px). الـ Padding لا يقبل ذلك أبداً.

ماذا يفعل المارجن السالب؟

بدلاً من "دفع" العناصر بعيداً، يقوم المارجن السالب بـ "سحب" العناصر لتقترب أكثر، أو حتى لتتداخل فوق بعضها البعض (Overlap).

margin-top: -20px;: يسحب العنصر للأعلى، مما قد يجعله يركب فوق العنصر الذي قبله.
margin-left: -10px;: يسحب العنصر لليسار خارج حدوده الطبيعية.

مثال: تداخل الصور


.profile-pic {
    border: 5px solid white;
    
    /* هذا يسحب الصورة للأعلى لتغطي جزءاً من العنصر الذي فوقها */
    /* مثل صور البروفايل في فيسبوك التي تتداخل مع الغلاف */
    margin-top: -50px; 
}

6. ظاهرة انهيار الهوامش (Margin Collapse)

هذه ظاهرة تربك المبتدئين وتجعلهم يظنون أن الـ CSS معطل. تحدث فقط في الهوامش العمودية (فوق وتحت).

ما هي القصة؟

إذا كان لديك عنصر (A) تحته margin-bottom: 30px.

وتحته مباشرة عنصر (B) فوقه margin-top: 20px.

المنطق يقول أن المسافة بينهما يجب أن تكون المجموع (30 + 20 = 50px). ولكن هذا خطأ!

في CSS، الهوامش العمودية "تنهار" وتندمج، وينتصر الرقم الأكبر فقط. إذن المسافة ستكون 30px فقط.

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

7. مقارنة نهائية: متى Margin ومتى Padding؟

السؤال الأزلي. إليك الجدول الذي يحسم الأمر.

الحالة	استخدم Padding	استخدم Margin
أريد إبعاد العنصر عن العناصر الأخرى المجاورة له.	❌	✅ (نعم)
أريد مسافة بين النص والحدود (Border).	✅ (نعم)	❌
أريد أن تكون المساحة ملونة بنفس لون الخلفية.	✅ (نعم)	❌ (المارجن شفاف دائماً)
أريد تحريك العنصر للتوسط (Center).	❌	✅ (margin: auto)
أريد جعل العنصرين يتداخلان (Overlap).	❌	✅ (مارجن سالب)

الخلاصة: الـ Padding هو "بطن" العنصر (داخلي)، والـ Margin هو "التباعد الاجتماعي" (خارجي).

الهوامش الخارجيه (Margin) - Css