جاري التحميل...

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

نموذج الصندوق في CSS (CSS Box Model) هو الأساس الذي يُبنى عليه تصميم كل عنصر في صفحات الويب. تخيّل أنك تبني منزلاً: لديك الجدران (المحتوى)، ثم تضيف مساحة فاصلة داخلية (padding)، وبعدها الجدران الخارجية (border)، وأخيرًا الحديقة المحيطة (margin). بهذه الطريقة، يُحدّد نموذج الصندوق كيفية ظهور العناصر، وكيفية تفاعلها مع العناصر الأخرى في الصفحة.
أهمية نموذج الصندوق تظهر في جميع أنواع المواقع:

في موقع إخباري، يُستخدم لتحديد المسافات بين الصور والنصوص لضمان سهولة القراءة.
في متجر إلكتروني (E-commerce)، يتحكم في كيفية عرض المنتجات بترتيب متناسق مع مسافات واضحة.
في صفحة شخصية، يساعد في إبراز الصور والمحتوى بطريقة منظمة وجذابة.
في بوابة حكومية، يضمن الالتزام بالتصميم الرسمي وسهولة التصفح للمستخدمين.
في هذا الدرس ستتعلم كيفية فهم نموذج الصندوق واستخدامه للتحكم في العرض (width) والارتفاع (height) والحواف الداخلية (padding) والحدود (border) والمسافات الخارجية (margin). ستتعرف أيضًا على كيفية حل مشكلات شائعة مثل تداخل العناصر أو تغير التخطيطات عند تغيير أبعاد النوافذ. بنهاية هذا الدرس، ستتمكن من قراءة أي تصميم كأنك ترتب مكتبة: كل كتاب (عنصر) في مكانه الصحيح وفق ترتيب محدد يضمن الجمال والوضوح.

مثال أساسي

css

CSS Code

/* مثال أساسي على نموذج الصندوق */
.box {
width: 200px;       /* عرض العنصر */
height: 100px;      /* ارتفاع العنصر */
padding: 20px;      /* مسافة داخلية */
border: 5px solid blue; /* حدود العنصر */
margin: 15px;       /* مسافة خارجية */
background-color: lightgray; /* لون خلفية */
}

في هذا المثال، نطبّق نموذج الصندوق على عنصر باسم .box.

الخاصية width تحدد عرض المحتوى الداخلي فقط دون احتساب الحواف (padding) أو الحدود (border) أو المسافة الخارجية (margin). في مثالنا، عرض العنصر الأساسي 200 بكسل.
الخاصية height تحدد ارتفاع المحتوى الداخلي، وهنا جعلناه 100 بكسل.
الخاصية padding هي المسافة الداخلية بين المحتوى وحدود العنصر. استخدمنا 20 بكسل لإبعاد النص أو أي محتوى عن الحدود مباشرة، مما يمنح مظهرًا مريحًا للقراءة.
الخاصية border تضيف حدودًا للعنصر. هنا حددنا سمكًا 5 بكسل بلون أزرق. الحدود تُحسب ضمن أبعاد الصندوق الكلية إذا لم نغيّر box-sizing إلى border-box.
الخاصية margin تضيف مسافة خارجية بين العنصر والعناصر الأخرى، وهنا 15 بكسل تسمح له بالتنفس بصريًا.
الخلفية (background-color) باللون الرمادي الفاتح تساعدنا في رؤية حدود العنصر وفهم تأثير نموذج الصندوق بوضوح.
عند جمع هذه الخصائص، يمكننا التحكم بشكل كامل في كيفية ظهور العناصر وتفاعلها مع محيطها. في مواقع مثل المتاجر الإلكترونية، هذا الأسلوب يمنع تداخل الصور ويضمن توزيعًا متساويًا للمنتجات، بينما في المواقع الإخبارية يمنح النصوص هوامش واضحة تعزز تجربة القراءة.

مثال عملي

css

CSS Code

/* مثال عملي لمحاكاة بطاقة خبر في موقع إخباري */
.news-card {
width: 300px;             /* عرض البطاقة */
padding: 15px;            /* مسافة داخلية للنص */
border: 2px solid #444;   /* حدود داكنة لتمييز البطاقة */
margin: 20px;             /* مسافة بين البطاقات */
background-color: #f9f9f9;/* خلفية فاتحة لسهولة القراءة */
box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* ظل لإبراز البطاقة */
}

أفضل الممارسات والأخطاء الشائعة:
أفضل الممارسات:

التصميم الموجّه للهواتف أولاً (Mobile-first): ابدأ بأبعاد صغيرة وضبط نموذج الصندوق ليناسب شاشات الهواتف قبل تكبيره للأجهزة الأكبر.
تحسين الأداء: استخدم أقل عدد ممكن من القيم الثابتة، وفضّل وحدات النسب المئوية أو rem لتسهيل الاستجابة.
كتابة كود قابل للصيانة: ضع القيم في متغيرات (CSS Variables) إذا كانت متكررة لتسهيل تعديل التصميم لاحقًا.
استخدام box-sizing: border-box يساعد في التحكم بالأبعاد الكلية دون الحساب اليدوي للحواف والحدود.
الأخطاء الشائعة:
إهمال تأثير padding وborder عند حساب العرض الكلي، مما يؤدي لتجاوز العناصر الحاويات.
تداخل العناصر بسبب تجاهل margin-collapse في العناصر الرأسية.
استخدام قيم كبيرة للـmargin أو padding تؤدي لمشاكل في الشاشات الصغيرة.
الإكثار من التعديلات اليدوية (Overrides) في CSS يؤدي لصعوبة الصيانة.
نصائح للتصحيح: استخدم أدوات المتصفح مثل DevTools لفحص نموذج الصندوق لأي عنصر. جرّب تعديل القيم مباشرة لرؤية تأثيرها، وستتعلم بسرعة كيف تتجنب هذه الأخطاء.

📊 مرجع سريع

Property/Method	Description	Example
width	عرض المحتوى الداخلي للصندوق	width: 200px;
height	ارتفاع المحتوى الداخلي للصندوق	height: 100px;
padding	المسافة الداخلية بين المحتوى والحدود	padding: 20px;
border	إضافة حدود حول العنصر	border: 2px solid black;
margin	المسافة الخارجية بين العنصر وما حوله	margin: 15px;
box-sizing	تحديد طريقة حساب الأبعاد الكلية	box-sizing: border-box;

ملخص وخطوات تالية:
تعلمت في هذا الدرس أن نموذج الصندوق CSS هو الهيكل الأساسي الذي تتحكم به في حجم ومكان كل عنصر في الصفحة. كل عنصر يتكوّن من محتوى، حواف داخلية (padding)، حدود (border)، ومسافة خارجية (margin)، وكل هذه الطبقات تعمل معًا لتحديد الشكل النهائي للصفحة.
ترتبط هذه المفاهيم مباشرة بهيكل HTML، حيث يمثل كل عنصر صندوقًا، ومع تفاعل JavaScript يمكنك تعديل هذه الأبعاد ديناميكيًا لإنشاء واجهات متجاوبة وتفاعلية.
الخطوة التالية هي التعمق في خصائص مثل overflow وbox-shadow لفهم كيفية تأثيرها على الصندوق، ثم الانتقال لدراسة Flexbox وGrid لتعلم كيفية ترتيب هذه الصناديق ضمن تخطيطات أكثر تعقيدًا.
نصيحة عملية: حاول إنشاء صفحة صغيرة تتكون من بطاقات منتجات أو أخبار، وعدّل قيم padding وmargin وborder حتى تفهم بعمق تأثير كل خاصية. بهذه الطريقة ستكتسب مهارة بصرية عملية تساعدك على تصميم مواقع احترافية بسهولة.

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

اختبر فهمك لهذا الموضوع بأسئلة عملية.

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة