Box Model

شرح خاصية Box Model

خاصية Box Model في CSS تشير إلى الطريقة التي تم فيها تصميم وترتيب محتوى الصفحة. تعتبر Box Model عبارة عن إطار يحيط بكل عنصر HTML في صفحة الويب، وهو ما يتيح للمصممين تحديد الحجم والشكل والموقع الذي يأخذه العنصر على الصفحة.

يتكون Box Model من أربعة عناصر رئيسية، وهي:

1. (Borders): وتعرف الحدود الإطار الخارجي للصندوق الذي يحيط بالعنصر.
2. (Padding): وتعرف الحشو المساحة الفارغة بين حدود العنصر ومحتواه الفعلي.
3. العرض (Width): وهو حجم الصندوق الذي يمثل العنصر على الصفحة.
4. الارتفاع (Height): وهو ارتفاع الصندوق الذي يمثل العنصر على الصفحة.

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

الامثلة:

• لتعيين حدود وحشو لعنصر div، يمكن استخدام الشفرة التالية:

div {
  border: 1px solid black;
  padding: 10px;
}

• لتعيين عرض وارتفاع لعنصر img، بالإضافة إلى حدود وحشو، يمكن استخدام الشفرة التالية:

img {
  border: 1px solid black;
  padding: 10px;
  width: 200px;
  height: 200px;
}

• لتعيين حدود وحشو لعنصر p، بالإضافة إلى تحديد العرض الكلي للصفحة، يمكن استخدام الشفرة التالية:

p {
  border: 1px solid black;
  padding: 10px;
  width: 80%;
}

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