CSS: هوامش وحشو CSS

آخر تحديث: 2026-10-13

المسافات في CSS تأتي بنوعين: حشو وهامش. هما خصائص أساسية للتحكم في "الفراغ الداخلي" و"المسافة الخارجية" للعناصر.

مرجع سريع لخصائص المسافات

خصائص هذا القسم: padding margin

1. الحشو

padding هو المسافة بين منطقة المحتوى والحدود — "الفراغ الداخلي" للعنصر.

▶ مثال

(1) تعيين جوانب فردية

▶ مثال

(2) قواعد اختصار الحشو

/* قيمة واحدة: جميع الجوانب متساوية */
padding: 20px;

/* قيمتان: أعلى+أسفل، يمين+يسار */
padding: 10px 20px;

/* ثلاث قيم: أعلى، يمين+يسار، أسفل */
padding: 10px 20px 30px;

/* أربع قيم: أعلى، يمين، أسفل، يسار (مع عقارب الساعة) */
padding: 10px 20px 30px 40px;

(3) حالات استخدام الحشو الشائعة

▶ مثال

(4) ملاحظات الحشو

• منطقة الحشو تُظهر لون خلفية العنصر والصور
• الحشو يجعل العناصر "أكبر" (ما لم تستخدم box-sizing: border-box)
• العناصر السطرية (مثل <span>) حشوها يعمل فقط أفقياً

2. الهامش

margin هو المسافة بين حدود العنصر والعناصر الأخرى — "المسافة الخارجية" للعنصر.

▶ مثال

(1) قواعد اختصار الهامش

نفس الحشو:

margin: 20px;            /* جميع الجوانب متساوية */
margin: 10px 20px;       /* أعلى+أسفل، يمين+يسار */
margin: 10px 20px 30px;  /* أعلى، يمين+يسار، أسفل */
margin: 10px 20px 30px 40px; /* أعلى، يمين، أسفل، يسار */

(2) حالات استخدام الهامش الشائعة

▶ مثال

(3) استخدام margin: auto للتوسيط

margin: 0 auto يمكنه توسيط عنصر قطعي أفقياً داخل أصله:

▶ مثال

3. تداخل الهامش

هذا مفهوم CSS مهم — الهوامش العمودية المتجاورة تتداخل في واحد، تأخذ القيمة الأكبر.

(1) السيناريو 1: أشقاء متجاورون

▶ مثال

(2) السيناريو 2: عناصر أصلية-تابعة

عندما لا يحتوي الأصل على حشو أو حدود أو محتوى، هامش الابن "يخترق" خارج الأصل:

▶ مثال

طرق التجنب:

• أضف padding: 1px للأصل (أو أي قيمة موجبة)
• أضف border: 1px solid transparent للأصل
• أضف overflow: hidden للأصل
• استخدم تخطيط flex أو grid

(3) السيناريو 3: عناصر فارغة

عنصر قطعي بدون محتوى أو حشو أو حدود سيكون له أيضاً تداخل في الهوامش العلوية والسفلية.

(4) حالات عدم تداخل الهامش

• الهوامش الأفقية (يمين/يسار) لا تتداخل
• أبناء تخطيط flex لا يتداخلون
• العناصر العائمة لا تتداخل
• العناصر المتموضعة absolutely لا تتداخل

4. اختيار الحشو مقابل الهامش

طريقة قرار بسيطة: هل يجب أن تغطي الخلفية هذه المنطقة؟ إذا نعم، استخدم حشو؛ إذا لا، استخدم هامش.

خصائص هذا القسم: padding margin

❓ أسئلة شائعة

📖 ملخص

• الحشو والهامش هما خصائص المسافة الأكثر استخداماً في تخطيط CSS
• الحشو يتحكم في الفراغ الداخلي، والهامش يتحكم في المسافة الخارجية
• فهم قواعد اختصارهما وفخ "تداخل الهامش" هو معرفة أساسية لتخطيطات موثوقة
• تعيين box-sizing: border-box عالمياً في بداية المشروع يمنع الحشو من توسيع العناصر ويُبسط حسابات الأبعاد

📝 تمارين

1. أنشئ صفحة "مجموعة بطاقات" بـ 3 بطاقات، باستخدام الهامش للتحكم في المسافة بين البطاقات.
2. أنشئ شريط تنقل باستخدام الحشو للتحكم في المسافة من النص إلى الحدود في كل عنصر تنقل.
3. وضح "تداخل الهامش" وحله ب طريقتين مختلفتين على الأقل.
4. استخدم margin: 0 auto لتوسيط حاوية بعرض 800px أفقياً في الصفحة.

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن