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

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

يتكون كل عنصر يمكن عرضه على صفحة الويب من صندوق أو أكثر من الصناديق المستطيلة. يصف نموذج الصندوق في لغة CSS عادةً كيف يتم وضع هذه الصناديق المستطيلة على صفحة ويب. يمكن أن تحتوي هذه الصناديق على خصائص مختلفة ويمكن أن تتفاعل مع بعضها البعض بطرق مختلفة ، كل صندوق يحتوي على منطقة محتوى content area ومساحة اختيارية محيطية تتكون من الحدود border والهوامش margin والحواشي padding .
يوضح المخطط التالي كيف تحدد خصائص CSS العرض width والارتفاع height والحواشي padding والحدود border والهوامش margin مقدار المساحة التي يمكن للعنصر أن يأخذها على صفحة الويب.

الحواشي Padding هي المساحة الشفافة بين محتوى العنصر وحدوده border(أو حافة الصندوق ، إذا لم يكن له حدود) ، في حين أن الهوامش margin هي المساحة الشفافة حول الحدود border.
أيضًا ، إذا كان العنصر يحتوي على لون الخلفية background color ، فسيكون هذا اللون مرئيًا من خلال منطقة الحواشي الخاصة بالعنصر. تظل منطقة الهوامش شفافة دائمًا ، ولا تتأثر بلون خلفية العنصر ، ومع ذلك ، فإنها تتسبب في رؤية لون الخلفية للعنصر الأب من خلالها.

عرض وارتفاع العناصر

عادة عندما تقوم بتحديد عرض عنصر وارتفاعه باستخدام الخصائص width و height ، في الواقع فإنك تقوم فقط بتحديد عرض وارتفاع منطقة المحتوى لهذا العنصر. يعتمد العرض والارتفاع الفعليان لصندوق العنصر على عدة عوامل.
يتم حساب المساحة الفعلية التي قد يشغلها صندوق العنصر على صفحة الويب على النحو التالي:

ستتعرف على كل هذه الخصائص بالتفصيل في الدروس القادمة.
لنجرب الآن المثال التالي لفهم كيفية عمل نموذج الصندوق في لغة CSS: