| المفهوم أو طريقة الكتابة | الشرح وطريقة العمل البرمجية | التأثير البصري ونصيحة التصميم |
|---|---|---|
| Padding | يحدد المسافة بين المحتوى الداخلي وبين حدود العنصر | يأخذ نفس لون خلفية العنصر تلقائياً ويمنح المكونات مساحة داخلية مريحة |
| Margin | يحدد المسافة الفاصلة بين العنصر الحالي والعناصر المجاورة له في الصفحة | شفاف دائماً ولا يظهر له لون ويُستخدم لتباعد المكونات وتجنب تداخلها |
| الاختصار بقيمة واحدة 10px | يطبق نفس القيمة على جميع الجهات الأربع بالتساوي | لتسهيل كتابة الكود وتوحيد التباعد من كل الاتجاهات بسرعة |
| الاختصار بقيمتين 10px 20px | القيمة الأولى للاتجاهين أعلى وأسفل والقيمة الثانية للاتجاهين يمين ويسار | ممتاز لتنسيق الأزرار والبطاقات النصية الأفقية |
| الاختصار بثلاث قيم 10px 20px 15px | الأولى للأعلى والثانية للجانبين يمين ويسار والثالثة للأسفل | يفيد عند رغبتك في تقليل أو زيادة المسافة السفلية فقط عن العلوية |
| الاختصار بأربع قيم 10px 20px 15px 5px | يطبق القيم بالترتيب أعلى ثم يمين ثم أسفل ثم يسار مع اتجاه عقارب الساعة | يمنحك تحكماً كاملاً ومنفصلاً لكل جهة في سطر كود واحد |
| Margin Collapse | تحدث عندما يلتقي هامش سفلي لعنصر مع هامش علوي لعنصر آخر فيتم دمجها واعتماد القيمة الأكبر فقط | تمنع تضاعف المساحات الفارغة بين الفقرات والعناوين بشكل مبالغ فيه وتجعل التباعد متناسقاً |
| حالات عدم حدوث الانهيار | لا تنهار الهوامش إذا كان هناك حشو padding أو حدود border بين العناصر أو عند استخدام أنظمة العرض الحديثة | تذكر هذا الاستثناء عند استخدام Flexbox أو Grid لأن الهوامش فيهما لا تنهار أبداً وتُجمع قيمها بالكامل |
**الحشو الداخلي (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.
| 1 | /* اختصارات */ |
| 2 | margin: 16px 24px; /* عمودي | أفقي */ |
| 3 | padding: 12px 16px 12px 24px; /* أعلى | يمين | أسفل | يسار */ |
| 4 | |
| 5 | /* قيمة auto للتوسيط الأفقي */ |
| 6 | .container { margin: 0 auto; } |
مثال 1: منع انهيار الهوامش
| 1 | /* الحالة الافتراضية — انهيار يحدث */ |
| 2 | h2 { margin-bottom: 24px; } |
| 3 | p { margin-top: 16px; } /* المسافة الفعلية = 24px فقط */ |
| 4 | |
| 5 | /* منع الانهيار بـ padding على الأب */ |
| 6 | .section { |
| 7 | padding-top: 1px; /* يكفي لمنع الانهيار */ |
| 8 | } |
| 9 | |
| 10 | /* أو بـ overflow */ |
| 11 | .section { overflow: hidden; } |