CSS: نموذج الصندوق CSS

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

نموذج الصندوق هو أساس تخطيط CSS. في عالم CSS، كل عنصر HTML يُعامل كـ "صندوق" مستطيل يتكون من منطقة المحتوى والحشو والحدود والهامش.

مرجع سريع لخصائص نموذج الصندوق

الخاصية	القيم الشائعة	الغرض
`width`	`300px`، `50%`، `auto`	عرض منطقة المحتوى
`height`	`200px`، `auto`	ارتفاع منطقة المحتوى
`padding`	`20px`، `10px 20px`، `10px 20px 15px 5px`	حشو داخلي (المحتوى إلى الحدود)
`border`	`2px solid #333`	حدود (عرض + نمط + لون)
`margin`	`10px`، `20px auto`، `0 auto`	هامش خارجي (العنصر إلى عناصر أخرى)
`box-sizing`	`content-box` (افتراضي)، `border-box`	نطاق حساب العرض/الارتفاع

خصائص هذا القسم: width height padding border margin box-sizing

1. أجزاء نموذج الصندوق الأربعة

من الداخل إلى الخارج:

TEXT

┌────────────────────────────────────┐  ← هامش
│  ┌──────────────────────────────┐  │  ← حدود
│  │  ┌─────────────────────────┐  │  │  ← حشو
│  │  │                         │  │  │
│  │  │     منطقة المحتوى       │  │  │
│  │  │                         │  │  │
│  │  └─────────────────────────┘  │  │
│  └──────────────────────────────┘  │
└────────────────────────────────────┘

(1) منطقة المحتوى

المنطقة التي يوجد فيها المحتوى الفعلي، مثل النصوص والصور. العرض والارتفاع يُتحكّم بهما بخاصيتي width وheight.

(2) الحشو

المسافة بين منطقة المحتوى والحدود، تُستخدم لإنشاء مسافة بيضاء بين المحتوى والحدود.

▶ مثال

▶ جرّب الكود

(3) الحدود

خط الحدود الذي يلف حول الحشو ومنطقة المحتوى.

▶ مثال

▶ جرّب الكود

(4) الهامش

المسافة بين الحدود والعناصر الأخرى، تُستخدم للتحكم في المسافة بين العناصر.

▶ مثال

▶ جرّب الكود

💡 ملاحظة: الهوامش العلوية والسفلية لعناصر المستوى القطري "تتداخل" (تأخذ القيمة الأكبر بدلاً من الجمع). الهوامش اليمنى واليسرى لا تتداخل.

2. الحجم الفعلي للعنصر

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

بشكل افتراضي (box-sizing: content-box):

TEXT

العرض الكلي للعنصر = width + padding-left + padding-right + border-left + border-right
الارتفاع الكلي للعنصر = height + padding-top + padding-bottom + border-top + border-bottom

على سبيل المثال:

▶ مثال

▶ جرّب الكود

الحجم الفعلي لعرض هذا الصندوق هو:

العرض الكلي = 200 + 20×2 + 2×2 = 244 بكسل
الارتفاع الكلي = 100 + 20×2 + 2×2 = 144 بكسل

إذا كنت تعتقد أن هذا الصندوق 200×100 فقط، فأنت مخطئ! كثير من المبتدئين يتعثرون هنا.

3. خاصية box-sizing

لحل مشكلة "الحجم الفعلي أكبر من المُعيَّن"، قدّم CSS3 خاصية box-sizing.

(1) content-box (افتراضي)

width وheight تشملان منطقة المحتوى فقط؛ الحشو والحدود لا تُدرجان. هذا هو الافتراضي وמקור "الفخ".

(2) border-box

width وheight تشملان المحتوى + الحشو + الحدود؛ الحدود والحشو لن "يُوسّعا" العنصر:

▶ مثال: مقارنة content-box و border-box

▶ جرّب الكود

💡 مقارنة: في وضع content-box، العناصر الابنة تفيض عن الأصل؛ في وضع border-box، العناصر الابنة تناسب تماماً. لهذا يوصي المشاريع الحديثة بتعيين box-sizing: border-box عالمياً.

(3) إعداد border-box العالمي

كثير من المشاريع تُعيّن هذا عالمياً في إعادة التعيين:

▶ مثال

▶ جرّب الكود

4. تصحيح نموذج الصندوق

استخدم أدوات المطور في المتصفح لفحص نموذج الصندوق بصرياً:

💡 نصيحة التصحيح: اضغط F12 لفتح أدوات المطور، ثم في علامة التبويب المُحسوبة في لوحة العناصر، يمكنك رؤية المحتوى والحشو والحدود والهوامش لكل عنصر — هذه هي الطريقة الأسرع لتشخيص مشاكل التخطيط.

انقر بزر الماوس الأيمن على عنصر في الصفحة، واختر "فحص"
حدد العنصر في لوحة العناصر
انتقل إلى لوحة مُحسوبة أو تخطيط
سترى مخطط نموذج الصندوق يُظهر قيم المحتوى والحشو والحدود والهامش

5. اختلافات نموذج الصندوق بين أنواع العناصر

عناصر المستوى القطري: العرض الافتراضي 100% من الحاوية الأبوية؛ الارتفاع يُحدده المحتوى
عناصر سطرية: لا تقبل العرض والارتفاع؛ الحشو/الهامش يعمل فقط أفقياً
عناصر سطرية-قطعية: يمكن تعيين العرض/الارتفاع، لكن لا تشغّل سطراً كاملاً

خصائص هذا القسم: width height padding border margin box-sizing

❓ أسئلة شائعة

س هل أستخدم content-box أم border-box؟

ج معظم المشاريع تختار border-box. مع border-box، الحشو والحدود لن يُوسّعا أبعاد العنصر، مما يجعل حسابات التخطيط أكثر بديهية. كثير من الأُطر (Bootstrap، Tailwind) تُعيّن border-box عالمياً. ما لم تكن لديك احتياجات خاصة، لا تستخدم content-box الافتراضي.

س كيف أرى نموذج الصندوق في المتصفح؟

ج اضغط F12 لفتح أدوات المطور، حدد عنصراً في لوحة العناصر، ولوحة المُحسوبة أو الأنماط على اليمين ستُظهر البنية ذات الطبقات الأربع لنموذج الصندوق (محتوى/حشو/حدود/هامش). هذه هي الطريقة الأسرع لتشخيص مشاكل التخطيط — يُنصح بشدة بجعلها عادةً.

س كل من الهامش والحشو يُنشئان مسافة — متى أستخدم أيهما؟

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

📖 ملخص

نموذج الصندوق هو مفهوم CSS الأكثر أساسية وأهمية
فهم البنية ذات الطبقات الأربع للمحتوى والحشو والحدود والهامش — وكيفية تأثير box-sizing على حسابات الأبعاد — هو شرط مسبق لكتابة تخطيطات موثوقة
تعيين box-sizing: border-box كافتراضي عالمي في بداية المشروع يوفر الكثير من المشاكل مع حسابات الأبعاد

📝 تمارين

أساسي

أنشئ صندوق 200×200 بحشو 30px وحدود 5px solid. استخدم أدوات المطور في المتصفح للتحقق من الأبعاد الفعلية للعرض والتحقق من صيغة نموذج الصندوق.
انسخ الصندوق أعلاه، أضف box-sizing: border-box، وراقب تغييرات الحجم الفعلي، وقارن مع التمرين السابق.

متوسط

أنشئ صفحة بصندوقين جنباً إلى جنب، اضبط هوامشهما، وراقب ظاهرة "تداخل الهامش" (الهوامش العلوية/Sفلية لعناصر المستوى القطري تأخذ الأكبر بدلاً من الجمع).
استخدم border-box لإنشاء "تخطيط عمودين بعرض 50% لكل منهما ومسافة 20px بينهما".

تحدٍ

أنشئ مكوّن بطاقة بـ:
- عرض ثابت 300px
- حشو 20px
- حدود 1px solid #ddd
- حدود نصف قطرها 8px
- استخدم border-box لضمان أن العرض الكلي دائماً 300px
أنشئ تخطيط نموذج باستخدام حسابات نموذج الصندوق لمحاذاة حقول الإدخال والأزرار بشكل مثالي.

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

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

من نحن