شرح Margin في CSS — كيف تضبط المسافات الخارجية وتستخدم margin: auto؟

بعد تعلم padding (المسافات الداخلية)، ننتقل الآن إلى margin وهي المسافات الخارجية التي تفصل العناصر عن بعضها.

إذا كنت تبحث عن ما هو margin في CSS أو كيفية توسيط div باستخدام margin auto أو الفرق بين margin و padding، فهذا الدرس يغطيها بوضوح.

ما هو Margin في CSS؟

Margin هو الفراغ خارج حدود العنصر. يُستخدم لإبعاد الصناديق عن بعضها وتنظيم التخطيط.

التعريف البسيط: Margin في CSS = مساحة خارجية حول العنصر.

خصائص Margin المنفصلة في CSS

• margin-top
• margin-right
• margin-bottom
• margin-left

.box {
    margin-top: 30px;
    margin-bottom: 30px;
}

ماذا يفعل هذا الكود؟ يضيف مسافة أعلى وأسفل العنصر.

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

خطأ شائع: محاولة تغيير المسافة داخل العنصر عبر margin بدل padding.

margin shorthand في CSS

مثل padding، يمكنك كتابة margin بصيغة مختصرة. الترتيب: Top → Right → Bottom → Left.

/* 4 قيم */
margin: 10px 20px 30px 40px;

/* 3 قيم */
margin: 10px 20px 30px;

/* قيمتان */
margin: 10px 20px;

/* قيمة واحدة */
margin: 16px;

ماذا يفعل هذا الكود؟ يوفر كتابة أقصر للمسافات الخارجية بدل 4 خصائص منفصلة.

خطأ شائع: خلط ترتيب القيم فينتج فراغات غير متوقعة.

margin: auto في CSS (توسيط العناصر)

من أشهر استخدامات margin في CSS هو توسيط عنصر block أفقياً. الشرط الأساسي: أن يكون للعنصر width محدد.

.card {
    width: 300px;
    margin: 0 auto;
}

ماذا يفعل هذا الكود؟ يجعل الهامش يميناً ويساراً تلقائياً فيتوسط العنصر.

سطر بسطر:

• width: 300px: يحدد عرض العنصر.
• margin: 0 auto: 0 للأعلى/الأسفل وauto لليمين/اليسار.

النتيجة المتوقعة: العنصر يظهر في منتصف الحاوية أفقياً.

خطأ شائع: نسيان تحديد width، فيبدو أن auto لا يعمل.

Negative Margin في CSS (القيم السالبة)

على عكس padding، margin يمكن أن تكون سالبة مثل -20px. هذا قد يحرّك العنصر ليتداخل مع عناصر أخرى.

.badge {
    margin-top: -10px;
}

ماذا يفعل هذا الكود؟ يرفع العنصر للأعلى بمقدار 10px.

النتيجة المتوقعة: تداخل مقصود أحياناً في التصاميم المتقدمة.

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

Margin Collapse في CSS (تداخل الهوامش)

عند وجود عنصرين block متتاليين عمودياً، قد لا يُجمع margin-bottom + margin-top. المتصفح غالباً يأخذ القيمة الأكبر فقط.

مثال: عنصر أول margin-bottom: 30px والثاني margin-top: 20px ⇒ المسافة غالباً 30px.

الفرق بين Margin و Padding في CSS

الخاصية	مكان المسافة	تأخذ خلفية العنصر؟	تقبل القيم السالبة؟
padding	داخل العنصر	نعم	لا
margin	خارج العنصر	لا	نعم

أخطاء شائعة في Margin in CSS

١) margin: auto لا يعمل: غالباً بسبب عدم تحديد width.

٢) خلط padding وmargin: ينتج مسافات داخل/خارج غير مقصودة.

٣) استخدام negative margin بلا حاجة: يزيد تعقيد التخطيط.

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

ما هو margin في CSS؟

هو المسافة الخارجية حول العنصر.

كيف أوسّط div باستخدام margin auto في CSS؟

أعطِ العنصر width ثم استخدم margin: 0 auto;.

ما الفرق بين margin و padding في CSS؟

margin خارجي، padding داخلي.

هل margin يقبل قيماً سالبة في CSS؟

نعم، ويمكن استخدامه لتحريك العنصر أو التداخل، لكن بحذر.

ما هو Margin Collapse في CSS؟

هو دمج الهوامش العمودية المتجاورة بحيث تظهر عادةً القيمة الأكبر فقط.