ما هو عنصر الصندوق "CSS BOX Model"؟ و كيف يتم إستخدامه؟

في CSS يتم تمثيل كل عنصر من عناصر مستند HTML عند إنشائه في المستعرض بأربعة مستطيلات متداخلة تشمل نموذج الصندوق و هي من الداخل و الخارج:

محتوى العنصر "Content": و يمثل كل ما هو موجود بين وسمي بداية و نهاية العنصر.
الإزاحة الداخلية "padding": و تمثل المسافة الفاصلة بين محتوى العنصر و بين حدوده.
الحدود "border": و يمثّل الإطار الخارجي للعنصر.
الإزاحة الخارجيّة "margin": و تمثّل المسافة الفاصلة بين حدود العنصر و العناصر الأخرى في المستند.