14. تعمق في نموذج الصندوق: الهامش (Margin)

الهامش هو المساحة خارج حدود العنصر. الغرض منه هو خلق فاصل بين العناصر المتجاورة. الهوامش دائماً شفافة.

تعيين الهامش

مثل الحشوة، يمكن تعيين الهامش بشكل فردي أو باستخدام الاختصار، باتباع ترتيب TRBL (أعلى، يمين، أسفل، يسار).

1. الخصائص الفردية

css .heading { margin-top: 30px; /* مساحة للأعلى / margin-bottom: 20px; / مساحة للأسفل */ margin-left: 0; }

2. صيغة الاختصار

css /* جميع الجوانب: 20px */ .box-1 { margin: 20px; }

/* أعلى/أسفل: 10px، يمين/يسار: 5px */ .box-2 { margin: 10px 5px; }

مفهوم رئيسي: التوسيط باستخدام الهامش التلقائي (Auto)

بالنسبة لـ العناصر على مستوى الكتلة (Block-level elements) التي لها عرض (width) محدد، فإن تعيين الهوامش اليسرى واليمنى إلى auto هو الطريقة القياسية لتوسيط العنصر أفقياً في الصفحة.

css .center-me { width: 600px; /* يجب أن يكون له عرض محدد! / margin: 0 auto; / 0 للأعلى/الأسفل، auto لليمين/اليسار */ border: 1px solid black; }

انهيار الهامش (Margin Collapse) - فخ للمبتدئين

من أكثر المفاهيم خداعاً للمبتدئين هو انهيار الهامش.

عندما يتم وضع عنصرين على مستوى الكتلة عمودياً فوق بعضهما، فإن هوامشهما الرأسية المتجاورة (العلوية والسفلية) لا تُجمع. بدلاً من ذلك، تندمج (تنهار)، ويفوز العنصر صاحب الهامش الأكبر.

إذا كان لـ h1 هامش سفلي margin-bottom: 30px والفقرة p التالية لها هامش علوي margin-top: 20px ، فإن المساحة الرأسية الناتجة بينهما ليست 50px، بل 30px (الأكبر بين الاثنين). يحدث انهيار الهامش عمودياً فقط، وليس أفقياً.