شرح CSS Margin خطوة بخطوة مع أمثلة توضيحية كاملة

شرح شامل لخاصية الهامش (Margin) في CSS مع كل التفاصيل

في هذا المقال، سنتعرف على خاصية margin في CSS بكل جوانبها: من كتابة margin مختصرة، إلى تحديد هامش لكل جانب، واستخدام القيم المختلفة، وسلوك Margin Collapse الذي يحدث للهوامش العمودية.

1. margin (Shorthand)

تتيح تحديد الهامش بكفاءة لجميع الجهات في سطر واحد.

length: مثل 5px, 1em، ويمكن أن تكون سالبة
%: نسبة من عرض الحاوية
auto: يحسب المتصفح الهامش تلقائيًا (مثلاً لتوسيط العنصر أفقيًا)
inherit: يرث القيمة من العنصر الأب

/* أمثلة مختصرة */
p { margin: 25px; }
p { margin: 25px 50px; }
p { margin: 25px 50px 75px; }
p { margin: 25px 50px 75px 100px; }

2. margin لكل جانب

يمكنك تحديد الهامش لكل جهة بشكل مستقل:

p {
  margin-top: 100px;
  margin-right: 150px;
  margin-bottom: 100px;
  margin-left: 80px;
}

3. قيمة auto

تُستخدم لتوسيط العنصر داخل الحاوية بشكل تلقائي:

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

4. القيمة Inherit

تنسخ الهامش من العنصر الأب.

div {
  margin-left: 100px;
}
p.ex1 {
  margin-left: inherit;
}

5. Margin Collapse (انهيار الهوامش)

تظهر هذه الظاهرة لدى العناصر block-level في الهوامش العمودية عندما تتلامس الهوامش العلوية والسفلية:

h1 {
  margin-bottom: 50px;
}
h2 {
  margin-top: 20px;
}
/* الفرق الفعلي بينهما هو 50px وليس 70px بسبب Margin Collapse */

p {
  margin-top: 30px;
  margin-bottom: 30px;
}
/* الفرق مجرد 30px وليس 60px */

لا يحدث Collapse في الهوامش الأفقية—مثل اليمين واليسار—فقط العمودية.:contentReference[oaicite:11]{index=11}

خاتمة

أنت الآن ملم بجميع خصائص margin في CSS مع شرح مفصل لكل طريقة كتابة، طرق التعامل مع collapse، والفرق بين القيم المختلفة. كتابة margins بشكل صحيح تساهم في تصميم مرتب وموثوق.