margin

خاصية الهامش الخارجي margin

خاصية margin تصنع مسافة خارج حدود العنصر تبعده عن جيرانه — وmargin-inline: auto وصفة توسيط الكتل الشهيرة.

المسافة «خارج السور»: تدفع الجيران بعيدًا ولا تتلون بخلفية العنصر (قارن بـ padding الداخلي). الاختصار يدور بعقارب الساعة: أعلى يمين أسفل يسار، وقيمتان تعنيان رأسي ثم أفقي.

سران يجب معرفتهما: التوسيط الكلاسيكي margin-inline: auto لكتلة بعرض محدد، وانهيار الهوامش Margin Collapsing — هامشان رأسيان متلاصقان يندمجان بالأكبر لا يجتمعان، مفاجأة كل مبتدئ. وفي المواقع العربية استخدم النسخ المنطقية margin-inline-start بدل left/right فتنقلب مع RTL تلقائيًا.

الصياغة

.box {
  margin: 16px;              /* الكل */
  margin: 8px 16px;          /* رأسي أفقي */
  margin-inline: auto;       /* توسيط كتلة بعرض محدد */
}

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>
  .centered { width: 200px; margin-inline: auto; background: #7c5cff; color: white; padding: 12px; border-radius: 10px; text-align: center; }
  .frame { background: #ede9fe; padding: 8px; border-radius: 12px; }
</style>
<div class="frame">
  <div class="centered">متوسطة بـ margin-inline: auto</div>
</div>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
margin: 8px 16px	قيمتان: رأسي ثم أفقي — الاختصار الأكثر استخدامًا
margin-inline: auto	توسيط أفقي لكتلة ذات عرض — الوصفة الخالدة
margin-inline-start/end	النسخ المنطقية — إلزامية لمواقع RTL
قيم سالبة	سحب العنصر نحو جاره أو فوقه — بحذر

💡 نصائح عملية

قاعدة التقسيم: margin بين العنصر وجيرانه، padding بينه وبين محتواه
هوامش بين إخوة داخل flex/grid؟ استخدم gap من الأب — أنظف دائمًا

⚠️ أخطاء شائعة

استغراب اندماج الهوامش الرأسية (30+20 = 30 لا 50) — إنه الانهيار الطبيعي
margin-left/right بموقع عربي — تنكسر عند أي محتوى LTR؛ المنطقية هي الصواب

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs