نموذج الصندوق في CSS | أساسيات CSS

 ما معنى مصطلح نموذج الصندوق


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


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

في الصورة الموضحة أدناه، يتم وصف مفهوم نموذج الصندوق:

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

 

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

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

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

div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}

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

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

 

لنفترض أنك تريد تصميم عنصر div بحيث يبلغ إجمالي عرضه 350 بكسل:

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

 يتم حساب العرض على النحو التالي:

320 بكسل (العرض)
+ 20 بكسل (المساحة المتروكة اليمنى + الحشوة اليسرى)
+ 10 بكسل (الحد الأيمن + الحد الأيسر) 
+ 0 بكسل (الهامش الأيمن + الهامش الأيسر)
350 بكسل


يتم حساب العرض الإجمالي للعنصر على النحو التالي:

العرض الكلي للعنصر = العرض + الحشو الأيسر + الحشو المناسب + الحد الأيسر + الحد الأيمن + الهامش الأيسر + الهامش الأيمن.

يتم حساب الارتفاع الكلي للعنصر على النحو التالي:

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


كلمات مفتاحية: