11. فهم نموذج الصندوق (Box Model) - نظرة عامة
كل عنصر HTML، بغض النظر عما إذا كان صورة أو عنواناً أو قسماً، يعامله المتصفح كصندوق مستطيل. فهم نموذج الصندوق (Box Model) هو المفهوم الأكثر أهمية في تخطيط CSS.
المكونات الأربعة
بالعمل من الداخل إلى الخارج، يتكون نموذج الصندوق من أربع طبقات:
- المحتوى (Content): النص الفعلي أو الصورة أو الوسائط داخل العنصر. هذا هو المكان الذي تُطبق فيه خصائص
widthوheightفي البداية. - الحشوة (Padding): المساحة الشفافة المحيطة بالمحتوى مباشرة. إنها تدفع الحدود (Border) بعيداً عن المحتوى.
- الحدود (Border): الحافة أو الإطار المحيط بالحشوة والمحتوى.
- الهامش (Margin): المساحة الشفافة خارج الحدود. إنها تدفع العناصر الأخرى بعيداً عن الصندوق الحالي.
mermaid graph TD A[Margin: مساحة خارجية] --> B(Border: الحافة) B --> C(Padding: مساحة داخلية) C --> D(Content: النص/الصورة)
لماذا هذا مهم؟
إذا كان لعنصرك عرض محدد بـ 200px، فإن إضافة 10px من الحشوة وحدود 2px ستزيد من المساحة الإجمالية التي يشغلها العنصر على الشاشة (ما لم تقم بتغيير box-sizing كما سنرى لاحقاً).
العرض الكلي = الهامش + الحدود + الحشوة + عرض المحتوى