نموذج الصندوق (Box Model) في CSS: الأساس لفهم تصميم العناصر - الدرس #19

أنواع الصناديق: Block و Inline

• Block Box: خاص بالعناصر الكتلية مثل <div>, <p>, <h1>… تأخذ سطرًا كاملاً.يبدأ العنصر التالي في سطر جديد.يمكن تحديد width وheight.
• تأخذ سطرًا كاملاً.
• يبدأ العنصر التالي في سطر جديد.
• يمكن تحديد width وheight.
• Inline Box: خاص بالعناصر الخطية مثل <span>, <a>… لا تبدأ في سطر جديد.تأخذ فقط المساحة التي يحتاجها المحتوى.لا تتأثر بـ width وheight.
• لا تبدأ في سطر جديد.
• تأخذ فقط المساحة التي يحتاجها المحتوى.
• لا تتأثر بـ width وheight.

مكونات نموذج الصندوق

نموذج الصندوق يتكوّن من أربع طبقات رئيسية:

1. المحتوى (Content) هو النص أو العناصر داخل العنصر.
2. هو النص أو العناصر داخل العنصر.
3. الحشوة (Padding) المسافة بين المحتوى وحدود العنصر.تقع داخل الحدود.تُستخدم لإضافة مساحة داخلية حول المحتوى.
4. المسافة بين المحتوى وحدود العنصر.
5. تقع داخل الحدود.
6. تُستخدم لإضافة مساحة داخلية حول المحتوى.
7. الحد (Border) يحيط بالحشوة والمحتوى.يُرسم مباشرة خارج الخلفية.يأخذ مساحة من أبعاد العنصر.
8. يحيط بالحشوة والمحتوى.
9. يُرسم مباشرة خارج الخلفية.
10. يأخذ مساحة من أبعاد العنصر.
11. الهامش (Margin) المسافة الخارجية بين العنصر والعناصر الأخرى.لا تؤثر على حجم العنصر نفسه.تُستخدم للفصل بين العناصر.
12. المسافة الخارجية بين العنصر والعناصر الأخرى.
13. لا تؤثر على حجم العنصر نفسه.
14. تُستخدم للفصل بين العناصر.

خاصية box-sizing: border-box

بشكل افتراضي، عندما تحدد width وheight لعنصر، فإن الحشوة والحدود تُضاف فوق هذه الأبعاد. هذا قد يؤدي إلى نتائج غير متوقعة.

لحل هذه المشكلة، نستخدم:

هذا يجعل width وheight تشمل المحتوى + الحشوة + الحدود، مما يسهل التحكم في الأبعاد بدقة.

سلوك العناصر الكتلية (Block Elements)

• تأخذ سطرًا كاملاً.
• height يكون تلقائيًا (auto) ويتوسع حسب المحتوى.
• يمكن تحديد width، لكن يُفضل استخدام وحدات نسبية لتصميم متجاوب.
• الحدود تُرسم خارج الخلفية، وتأخذ مساحة من الأبعاد.

الفرق بين Padding و Margin

مثال عملي:

خلاصة

• كل عنصر HTML له صندوق يحيط به.
• الصندوق يتكوّن من: المحتوى، الحشوة، الحدود، الهامش.
• استخدم box-sizing: border-box دائمًا لتجنب مشاكل في الحسابات.
• padding تضيف مساحة داخلية، وmargin تضيف مساحة خارجية.
• فهم نموذج الصندوق ضروري لتنسيق العناصر بدقة وفعالية.

هل ترغب أن أقدّم لك رسمًا توضيحيًا لنموذج الصندوق؟