تستخدم خاصية box-sizing في لغة CSS لتسمح بحجم padding وحجمborder يكون من إجمالي طول وعرض العنصر لان في وضعة الطبيعي حجم padding وحجمborder يزيد عن حجم العنصر.

حجم العنصر بدون خاصية box-sizing:

حجم عرض العنصر = 200px + حجم border الإطار 5px + حجم padding هو 10px = إجمالي العرض هو 200+5+10 = 215px.
حجم طول العنصر = 300px + حجم border الإطار 5px + حجم padding هو 10px = إجمالي العرض هو 300+5+10 = 315px.

حجم العنصر مع خاصية box-sizing:

حجم عرض العنصر = 200px + حجم border الإطار 5px + حجم padding هو 10px = إجمالي العرض هو 200px فقط.
حجم طول العنصر = 300px + حجم border الإطار 5px + حجم padding هو 10px = إجمالي العرض هو 300px فقط.

قيم خاصية box-sizing في لغة CSS:

content-box يتمدد حجم (طول وعرض) العنصر عندما يتم إضافة border وإضافة padding له يزيد حجم عرض وحجم الطول عن الحجم المحدد له في خاصية height وعرض العنصر المحدد له خاصية width وهي القيمة الأفتراضية.
border-box تستخدم خاصية box-sizing مع القيمة border-box لكي لا يتمدد حجم (طول وعرض) العنصر عندما يتم إضافة border وإضافة padding له ولا يزيد حجم عرض وحجم الطول عن الحجم المحدد له في خاصية height وعرض العنصر المحدد له خاصية width.

without box-sizing

يدون خاصية box-sizing فالعنصر يزيد عن حجم العرض.

with box-sizing

لا يزيد حجم العنصر مع padding و border يصبح الطول والعرض شامل جميع المساحة.

CSS box-sizing Syntax

طريقة كتابة خاصية box-sizing في لغة CSS.

box-sizing:value;

جربها بنفسك

CSS box-sizing Values

قيم خاصية box-sizing في لغة CSS.

box-sizing:content-box|border-box|initial|inherit;

جربها بنفسك

</> CSS box sizing content box
خاصية box-sizing مع قمية content-box في لغة CSS

تستخدم خاصية box-sizing مع القيمة content-box لكي يتمدد حجم (طول وعرض) العنصر عندما يتم إضافة border وإضافة padding له يزيد حجم عرض وحجم الطول عن الحجم المحدد له في خاصية height وخاصية width وهي القيمة الأفتراضية.

جربها بنفسك

CSS box sizing content box

خاصية box-sizing معالقيمة content-box في لغة CSS.

.item
{
  background-color: rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  width:300px;
  height:200px;
}

جربها بنفسك

</> CSS box sizing border box
خاصية box-sizing مع قمية border-box في لغة CSS

تستخدم خاصية box-sizing مع القيمة border-box لكي لا يتمدد حجم (طول وعرض) العنصر عندما يتم إضافة border وإضافة padding له ولا يزيد حجم عرض وحجم الطول عن الحجم المحدد له في خاصية height وعرض العنصر المحدد له خاصية width.

جربها بنفسك

CSS box sizing border box

خاصية box-sizing معالقيمة border-box في لغة CSS.

.item
{
  background-color: rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  width:300px;
  height:200px;
  box-sizing: border-box;
}

جربها بنفسك

معلومات تهمك

لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.

عدد المشاركات

التالى

CLOSETAG

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

CSS Box Sizing
خاصية box-sizing في لغة CSS

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات CSS Box Sizing CSS