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

بالإضافة إلى تحديد خلفية وحدود نموذج الصندوق، يرشدك هذا الدليل خلال الحشو والهامش وحجم الصندوق حتى تتمكن من التحكم الكامل في التخطيط. للشروع في مستوى احترافي لتصميم مشاريع الويب الخاصة بك، من المهم التعرف على Box Model بغض النظر عن مستوى البرمجة الخاص بك.

في مقال اليوم، سوف نتعمق في خاصية الخلفية وخاصية الحدود لنموذج الصندوق في CSS.

نموذج الصندوق في CSS:

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

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

• الخلفية: تحدد خاصية الخلفية اللون أو الصورة لمنطقة المحتوى، والحشو، والحدود لتوفير الطبقة الأساسية للعنصر بشكل مرئي.
• المحتوى: الجزء الأعمق من المربع، والذي يحتوي على النص أو الصورة.
• الحشوة: المسافة بين المحتوى والحدود. تضيف الحشوة فقط المسافة الداخلية داخل الصندوق، داخل حجمه الفعلي.
• الحدود: هو خط حول الحشوة إذا كانت موجودة، والمحتوى. يضيف سمكًا ويمكن أيضًا أن يكون بأشكال وألوان مختلفة.
• الهامش: المسافة بين الحدود والعناصر الأخرى...تابع القراءة.