نموذج الصندوق في CSS
أنت تعرف بالفعل الحدود وpadding وmargin والعرض. الآن ضعها على خريطة واحدة. يقول نموذج الصندوق في CSS إن كل عنصر طبقات متداخلة: المحتوى في الوسط، ثم padding، ثم الحد، ثم margin من الخارج.
الطبقات الأربع
اقرأ الصندوق من الداخل إلى الخارج.
📊 طبقات نموذج الصندوق
| الطبقة | أين تقع | دورها اليومي |
|---|---|---|
| المحتوى | المركز | النص والصور والأبناء يعيشون هنا؛ width / height عادةً تقيس هذا |
| Padding | بين المحتوى والحد | وسادة داخلية؛ الخلفية غالباً تملأها |
| الحد (border) | حول الـ padding | الحافة المرسومة للصندوق |
| Margin | خارج الحد | فجوة خارجية تفصل هذا الصندوق عن جيرانه |
ابدأ بحجم المحتوى فقط
عرض بسيط بلا padding ولا حد يبقي القصة واضحة.
عرض المحتوى فقط
css.box-content {
width: 200px;
background-color: #ccfbf1;
}أضف padding — المنطقة الملوّنة تكبر
يقع الـ padding داخل الحد. في النموذج الافتراضي content-box، يُضاف الـ padding خارج عرض المحتوى، فيصير الصندوق الملوّن أعرض.
محتوى مع padding
css.box-pad {
width: 200px;
padding: 20px;
background-color: #99f6e4;
}
/* المحتوى يبقى 200px؛ الـ padding يضيف 20px لكل جانب */أضف حداً — حلقة أخرى
يلتف الحد حول الـ padding. مع القياس الافتراضي، سُمك الحد يضيف أيضاً إلى الحجم الخارجي لصندوق الحد.
محتوى وpadding وحد
css.box-border {
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #5eead4;
}اجمع الطبقات الأربع
الـ margin لا يلوّن الخلفية؛ يدفع الجيران فقط بعيداً.
وصفة نموذج الصندوق الكاملة
css.card {
width: 200px; /* محتوى */
padding: 16px; /* وسادة داخلية */
border: 2px solid #134e4a; /* حافة */
margin: 24px; /* فجوة خارجية */
background-color: #ecfdf5;
}نفس العرض، حجم كلي مختلف
صندوقان قد يشتركان في width: 200px ثم يبدوان مختلفين جداً حين يدخل الـ padding والحد الوصفة.
مقارنة بسيط مع مبطّن
css.bare {
width: 200px;
background-color: #fef3c7;
}
.padded {
width: 200px;
padding: 24px;
border: 6px solid #b45309;
background-color: #fde68a;
}
/* كلاهما يدّعي عرض 200px؛ .padded يشغل مساحة أفقية أكبر */القاعدة الافتراضية للتذكّر
افتراضياً (box-sizing: content-box)، يصف width وheight صندوق المحتوى. الـ padding والحد عادةً يجعلان الصندوق الظاهر النهائي أكبر. درس لاحق يغطي box-sizing: border-box الذي يغيّر هذه الحسابات.
جرّب بنفسك
- ابنِ
.box-contentبـwidth: 200pxوخلفية فقط. - انسخه، أضف
padding: 20px، ولاحظ نمو المنطقة الملوّنة. - أضف حداً سميكاً وراقب الحجم الكلي مرة أخرى.
- أضف
margin: 24pxوتأكد أن الجيران يبتعدون دون أن تملأ الخلفية تلك الفجوة. - ضع
.bareو.paddedجنباً إلى جنب — نفس العرض المعلن، بصمة مختلفة.
أخطاء شائعة
- الاعتقاد أن الـ margin جزء من تعبئة الخلفية (هو خارج وغالباً شفاف)
- إعلان
width: 200pxوتوقّع أن صندوق الحد يبقى بالضبط 200px بعد padding ثقيل (ليس مع content-box) - خلط ترتيب الطبقات (محتوى → padding → حد → margin)
- خلط outline مع border (أداة مختلفة)
- القفز إلى عادات border-box قبل فهم النموذج الافتراضي
ملخص
- لكل عنصر طبقات محتوى وpadding وحد وmargin
- الـ padding داخل الحد؛ الـ margin خارجه
- العرض/الارتفاع الافتراضي يقيس صندوق المحتوى
- الـ padding والحد غالباً يزيدان الحجم الظاهر الكلي
- الـ margin يفصل من الخارج دون تلوين التعبئة
box-sizing(درس تخصصي لاحق) يمكن أن يغيّر حساب العرض
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى