الهوامش الخارجية والداخلية (margin, padding, Margin Collapse)

**الحشو الداخلي (Padding):** المسافة بين المحتوى وحدود العنصر. يأخذ لون الخلفية.

**الهامش الخارجي (Margin):** المسافة بين العنصر والعناصر المجاورة. شفاف دائماً.

**الاختصارات:** `margin: 10px` — كل الجهات `margin: 10px 20px` — أعلى/أسفل | يسار/يمين `margin: 10px 20px 15px` — أعلى | جانبان | أسفل `margin: 10px 20px 15px 5px` — أعلى | يمين | أسفل | يسار (اتجاه عقارب الساعة)

**Margin Collapse (انهيار الهوامش):** ظاهرة تحدث في العناصر البلوكية — عندما يكون لعنصرين هامش أسفل وأعلى، يُستخدم الأكبر فقط لا مجموعهما.

مثال: h1 بـ margin-bottom: 30px، و p بـ margin-top: 20px → المسافة بينهما 30px لا 50px.

**متى لا يحدث الانهيار؟** عند وجود padding أو border أو عند استخدام Flexbox/Grid.