الدرس الثالث: الصندوق النموذجي (Box Model) في CSS

الصندوق النموذجي (Box Model) هو مفهوم أساسي في CSS يتحكم في كيفية عرض وتنسيق العناصر في صفحة الويب. كل عنصر في HTML يُمثل كصندوق يحتوي على أربعة أجزاء رئيسية: المحتوى، الحشو (Padding)، الحدود (Border)، والهامش (Margin).

1. مكونات الصندوق النموذجي:

• المحتوى (Content): يمثل النص أو الصور أو أي عناصر أخرى داخل العنصر.
• الحشو (Padding): المسافة بين المحتوى وحدود العنصر. الحشو يضيف مساحة داخلية للعنصر، لكنه لا يؤثر على حجم الحدود.
• الحدود (Border): إطار حول المحتوى والحشو. يمكن تخصيص سماكة الحدود، لونها، ونمطها.
• الهامش (Margin): المسافة الفاصلة بين العنصر والعناصر المجاورة أو حافة الصفحة.

الصورة التالية توضح هيكل الصندوق النموذجي:

| Margin |
|--------|
| Border |
|--------|
| Padding|
|--------|
| Content|

2. كيف نتحكم في الصندوق النموذجي باستخدام CSS

يمكنك التحكم في هذه الأجزاء باستخدام مجموعة من الخصائص في CSS:

1. الحشو (Padding):

   • يُحدد المسافة الداخلية بين المحتوى والحدود.
   • يمكن تعيين قيم الحشو لكل جانب على حدة (أعلى، يمين، أسفل، يسار) أو بشكل عام لجميع الجوانب.

   مثال:

   div {
       padding: 20px; /* تطبيق 20px على جميع الجوانب */
   }
   
   p {
       padding-top: 10px;   /* الحشو العلوي */
       padding-right: 15px; /* الحشو الأيمن */
       padding-bottom: 10px; /* الحشو السفلي */
       padding-left: 15px;   /* الحشو الأيسر */
   }
   

2. الهامش (Margin):

   • يُحدد المسافة الخارجية بين العنصر والعناصر الأخرى.
   • يمكنك تعيين قيم الهامش لكل جانب بشكل منفصل، كما يمكن استخدام القيمة auto لمركزة العناصر أفقياً.

   مثال:

   div {
       margin: 20px; /* تطبيق 20px على جميع الجوانب */
   }
   
   p {
       margin-top: 10px;    /* الهامش العلوي */
       margin-right: 5px;   /* الهامش الأيمن */
       margin-bottom: 10px; /* الهامش السفلي */
       margin-left: 5px;    /* الهامش الأيسر */
   }
   
   .centered {
       margin: 0 auto; /* مركزة العنصر أفقياً */
   }
   

3. الحدود (Border):

   • تُستخدم لتحديد حدود العنصر. يمكن تخصيص لون الحدود، سماكتها، ونمطها.

   مثال:

   div {
       border: 2px solid black; /* حدود بسماكة 2px ولون أسود ونمط صلب */
   }
   
   p {
       border-top: 5px dotted blue; /* حدود علوية بنمط منقط ولون أزرق */
   }
   

3. التفاعل بين الحشو والهامش والحدود

أحد أهم جوانب الصندوق النموذجي هو كيفية تفاعل هذه الخصائص مع بعضها لتحديد حجم العنصر في الصفحة. الحجم الفعلي للعنصر يُحسب على النحو التالي:

الحجم الفعلي = العرض + الحشو + الحدود + الهامش

مثال:

div {
    width: 200px;
    padding: 10px;
    border: 5px solid black;
    margin: 20px;
}

في هذا المثال:

• عرض المحتوى: 200px
• الحشو (Padding): 10px من كل جانب، لذا يضيف 20px إلى العرض.
• الحدود (Border): 5px من كل جانب، لذا يضيف 10px إلى العرض.
• الهامش (Margin): لا يؤثر على العرض، لكنه يؤثر على المسافة بين العناصر.

إجمالي العرض الفعلي سيكون: 200px + 20px (الحشو) + 10px (الحدود) = 230px

4. الصندوق النموذجي "box-sizing"

بشكل افتراضي، يتم حساب الحشو والحدود خارج العرض الذي تم تعيينه للعنصر. ولكن باستخدام خاصية box-sizing، يمكنك التحكم في كيفية حساب العرض.

• القيمة الافتراضية: content-box (الحشو والحدود يتم حسابهما خارج العرض المحدد).
• القيمة البديلة: border-box (يتم تضمين الحشو والحدود ضمن العرض المحدد).

مثال:

div {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: border-box; /* يجعل الحشو والحدود ضمن العرض المحدد */
}

في هذا المثال، عرض العنصر سيكون دائمًا 200px بغض النظر عن الحشو والحدود.

الواجب:

1. جرب إنشاء مربع مع استخدام الحشو، الحدود، والهامش وراقب تأثيرها على حجم العنصر.
2. جرب استخدام خاصية box-sizing ولاحظ الفرق بين القيمتين content-box وborder-box.

في الدرس القادم، سنتعرف على خصائص الخلفيات في CSS وكيفية استخدامها لإنشاء تصاميم جميلة.