مرحباً بك في الدرس الخامس من دورة CSS للمستوى المبتدئ!

في الدروس السابقة، تعلمت كيفية تغيير الألوان، الخطوط، وتنسيق النصوص الأساسية. اليوم، سننتقل إلى مفهوم يعد بمثابة حجر الأساس لتصميم أي موقع إلكتروني، ألا وهو نموذج الصندوق (The CSS Box Model). فهم هذا المفهوم سيحل لك 90% من مشاكل التنسيق التي قد تواجهك أثناء بناء صفحات الويب.

ما هو نموذج الصندوق (Box Model) في CSS؟

ببساطة شديدة، كل عنصر HTML تراه على صفحة الويب هو عبارة عن "صندوق" مستطيل الشكل. يتكون هذا الصندوق من 4 طبقات رئيسية متداخلة من الداخل إلى الخارج. تخيل أنك تغلف هدية: المحتوى هو الهدية، ثم يأتي ورق التغليف، ثم الإطار الخارجي، وأخيراً المسافة بين هذه الهدية والهدايا المجاورة لها.

تتكون هذه الطبقات الأربع من الآتي:

• Content (المحتوى): النص أو الصورة الموجودة داخل العنصر (مثل النصوص داخل وسم فقرة

  ).

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

تطبيق عملي على نموذج الصندوق

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

<style>
  .box-example {
    /* تحديد عرض الصندوق */
    width: 300px;
    
    /* المحتوى والخلفية */
    background-color: #3498db;
    color: white;
    
    /* الحشو الداخلي (Padding) */
    padding: 20px;
    
    /* الحدود (Border) */
    border: 5px solid #2c3e50;
    
    /* الهامش الخارجي (Margin) */
    margin: 30px;
  }
</style>

<div class="box-example">
  هذا النص يمثل محتوى الصندوق، وهو محاط بحشو وحدود وهوامش.
</div>

كيف يتم حساب العرض الحقيقي للعنصر؟

يقع الكثير من المبتدئين في خطأ حساب عرض العنصر. إذا حددت عرض العنصر (width) بـ 300 بكسل، وأضفت 20 بكسل حشو (padding) من الجانبين، و5 بكسل حدود (border) من الجانبين، فإن العرض الإجمالي على الشاشة سيكون كالتالي:

300 (العرض) + 40 (الحشو يمين ويسار) + 10 (الحدود يمين ويسار) = 350 بكسل!

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

مصادر للتوسع والتعلم

للاطلاع على المزيد من التفاصيل والخصائص المتقدمة المتعلقة بنموذج الصندوق، يمكنك زيارة التوثيق الرسمي لـ MDN حول نموذج الصندوق.

إلى هنا نكون قد انتهينا من الدرس الخامس. تدرب جيداً على تطبيق الـ Padding والـ Margin والـ Border، ونلتقي في الدرس القادم لنستكمل رحلتنا!