ما هو نموذج الصندوق؟

في CSS، يتم التعامل مع كل عنصر HTML كصندوق مستطيل، وفقاً لـ نموذج الصندوق (Box Model). يتكون هذا النموذج من أربعة أجزاء رئيسية:

1. المحتوى – النص الفعلي، أو الصورة، أو أي محتوى آخر داخل المربع.

2. البطانة (Padding) – المسافة بين المحتوى والإطار. تزيد من حجم العنصر ولكنها تحافظ على لون الخلفية بداخله.

3. Border – خط يحيط بالبطانة (padding) والمحتوى. يمكن أن يكون له أنماط وألوان وعروض مختلفة.

4. الهامش (Margin) – المساحة خارج الإطار التي تفصل العنصر عن العناصر الأخرى.

فهم نموذج الصندوق (Box Model) يساعد في التحكم في المسافات والتخطيط في تصميم الويب! 🚀