CSS - Margins الهوامش

CSS - الهوامش (Margins)

🔸 تُستخدم خاصية margin في CSS لتحديد المسافة الفارغة خارج حدود العنصر، أي المساحة التي تفصل بين العنصر والعناصر المجاورة له.

✅ استخدام خاصية margin

يمكنك تعيين هامش على كل جانب من جوانب العنصر:

• margin-top – الهامش العلوي
• margin-right – الهامش الأيمن
• margin-bottom – الهامش السفلي
• margin-left – الهامش الأيسر

div {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 20px;
  margin-left: 30px;
}

🧪 اختصار margin

يمكنك كتابة كل القيم في سطر واحد:

div {
  margin: 20px 30px 20px 30px; /* top, right, bottom, left */
}

أو يمكنك استخدام الصيغ المختصرة التالية:

• margin: 25px; ➜ لجميع الاتجاهات
• margin: 10px 20px; ➜ أعلى وأسفل | يمين ويسار
• margin: 10px 15px 20px; ➜ أعلى | يمين ويسار | أسفل

📌 ملاحظات مهمة

• يمكنك استخدام auto لتوسيط عنصر أفقيًا داخل الحاوية:

div {
  width: 300px;
  margin: auto;
}

❗ مشكلة Collapsing Margins (دمج الهوامش)

في بعض الحالات، إذا كانت هناك هوامش متجاورة من عناصر مختلفة أو من نفس العنصر، فإن CSS تقوم بدمجها في هامش واحد فقط بدلاً من جمعهما. هذا يُعرف بـ Collapsing Margins.

🔸 مثال على الدمج

<style>
  p {
    margin: 30px 0;
  }
</style>

<p>فقرة أولى</p>
<p>فقرة ثانية</p>

في هذا المثال، بدلًا من أن يكون الهامش بين الفقرتين 60px (30px لكل منهما)، يتم دمجهما ويصبح 30px فقط.

💡 ملاحظات إضافية حول collapsing margins

• الدمج يحدث فقط في الهوامش العمودية (top و bottom).
• يحدث بين عنصرين متجاورين أو بين عنصر والـ parent الخاص به إذا لم يكن هناك حدود أو padding أو محتوى بينهما.
• لتجنب الدمج، يمكن وضع padding أو border أو أي عنصر آخر بينهما.