نموذج الحاوية CSS

نموذج الحاوية CSS

كل عناصر HTML يمكن اعتبارها مربعات. في CSS، عند الحديث عن التصميم والتصميم، يتم استخدام المصطلح "نموذج الصندوق" أو "نموذج الصندوق".

يكون نموذج الصندوق في CSS في الواقع صندوقًا يحيط بكل عنصر HTML. ويشمل: الهوامس الخارجية والحواف والهوامس الداخلية والمحتوى الفعلي. يوضح الشكل التالي نموذج الصندوق:

نموذج الحاوية CSS

شرح للأجزاء المختلفة:

  • المحتوى - محتوى الصندوق، حيث يتم عرض النصوص والصور.
  • الهوامس الداخلية - إزالة منطقة المحتوى. الهوامس الداخلية شفافة.
  • الحواف - تحيط بالهوامس الداخلية والمحتوى.
  • الهوامس الخارجية - إزالة منطقة الحدود الخارجية. الهوامس الخارجية شفافة.

يسمح نموذج الصندوق لنا بإضافة حواف حول العنصر وتحديد المسافة بين العناصر.

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

تنبيه:يطبق اللون الخلفي على منطقة تتكون من المحتوى والهوامس الداخلية والحواف.

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

* {
  margin: 0;
  padding: 0;
}

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

افترض أن كل جانب من جوانب الصندوق يحتوي على 10 بكسل من الهوامش الخارجية و5 بكسل من الهوامش الداخلية. إذا كنت ترغب في أن يصل حجم هذا عنصر الصندوق إلى 100 بكسل، يجب ضبط عرض المحتوى إلى 70 بكسل، انظر الشكل التالي:

مثال نموذج الحاوية CSS 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

تنبيه:يمكن تطبيق الهوامش الداخلية والحواف والهوامش الخارجية على جميع جوانب العنصر، أو تطبيقها على جانب واحد فقط.

تنبيه:يمكن أن تكون الهوامش الخارجية سالبة، وتستخدم الهوامش الخارجية السالبة في العديد من الحالات.

مثال

عرض نموذج الصندوق:

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

جرب بنفسك

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

لضبط عرض وارتفاع العنصر بشكل صحيح في جميع المتصفحات، يجب أن تعرف كيف يعمل نموذج الصندوق.

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

مثال

<div> العرض الإجمالي للعنصر سيكون 350px:

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0; 
}

جرب بنفسك

حساب كالتالي:

320px (عرض)
+ 20px (الهوامش الداخلية اليسرى + اليمنى)
+ 10px (الحواف اليسرى + اليمنى)
+ 0px (الحواف الخارجية اليسرى + اليمنى)
= 350px

يجب حساب العرض الإجمالي للعنصر كما يلي:

عرض العنصر الإجمالي = العرض + الهوامش الداخلية اليسرى + الهوامش الداخلية اليمنى + الحواف اليسرى + الحواف اليمنى + الهوامش الخارجية اليسرى + الهوامش الخارجية اليمنى

يجب حساب الارتفاع الإجمالي للعنصر كما يلي:

ارتفاع العنصر الإجمالي = الارتفاع + الهوامش الداخلية العلوية + الهوامش الداخلية السفلية + الحواف العلوية + الحواف السفلية + الهوامش الخارجية العلوية + الهوامش الخارجية السفلية