مقدمة إلى نموذج الإطار CSS

يحدد نموذج الصندوق (Box Model) كيفية معالجة صندوق العنصر محتواه،الpadding،الحواف و الهوامش الطريقة.

مقدمة إلى نموذج الإطار CSS

نموذج الإطار CSS

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

نصيحة:تُطبق الظلال على منطقة تتكون من المحتوى والpadding والborder.

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

* {
  margin: 0;
  padding: 0;
}

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

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

مثال نموذج الإطار CSS 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

نصيحة:يمكن تطبيق padding والborder والهوامش على جميع الجوانب لإlement أو على جانب معين.

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

التوافق مع المتصفحات

بمجرد تعيين DTD المناسب للصفحة، ستقوم معظم المتصفحات بعرض المحتوى كما هو موضح في الصورة أعلاه. ومع ذلك، فإن عرض IE 5 و 6 غير صحيح. وفقًا لمواصفات W3C، مساحة محتوى العنصر تُحدد بواسطة خصائص width، بينما يتم حساب قيم padding والborder المحيطة بالمحتوى بشكل منفصل. لسوء الحظ، يستخدم IE5.X و 6 نموذجًا غير معياري في الوضع المضطرب. لا تحتوي خصائص width لهذه المتصفحات على عرض المحتوى فقط، بل على مجموع عرض المحتوى والpadding والborder.

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

ترجمة المصطلحات

  • element: العنصر.
  • padding: السماحية الداخلية، ويُنقل بعض الموارد إلى الحشوة.
  • border: الحدود.
  • margin: السماحية الخارجية، ويُنقل بعض الموارد إلى الفضاء أو الحافة الفارغة.

في codew3c، نسمي padding وmargin بشكل متسق بالسماحية الداخلية والسماحية الخارجية. الفضاء داخل الحدود هو السماحية الداخلية، والفضاء خارج الحدود هو السماحية الخارجية، من السهل تذكر ذلك:))