خاصية box-sizing في لغة CSS تُستخدم لتحديد كيفية حساب العرض والارتفاع الكليين للعنصر. بشكل افتراضي، عند تحديد عرض وارتفاع عنصر، فإنك تحدد فقط حجم محتوى العنصر، ثم تُضاف إليه قيم الحاشية الداخلية (padding) والإطار (border) لحساب الحجم الكلي. هذا قد يُسبب مشاكل في التخطيط، خاصةً عند استخدام نسب مئوية للعرض.

خاصية box-sizing تُمكنك من تغيير هذا السلوك الافتراضي، بحيث يتم تضمين الحاشية الداخلية والإطار ضمن العرض والارتفاع المُحددين.

القيم المُمكنة لخاصية box-sizing:

  • content-box (القيمة الافتراضية): يتم حساب العرض والارتفاع فقط لمحتوى العنصر. تُضاف قيم الحاشية الداخلية والإطار إلى العرض والارتفاع لحساب الحجم الكلي.

    • مثال: إذا كان عرض العنصر 200px، والحاشية الداخلية 10px من كل جانب، والإطار 5px من كل جانب، فإن العرض الكلي للعنصر سيكون 200 + (10 * 2) + (5 * 2) = 230px.

  • border-box: يتم حساب العرض والارتفاع ليشمل الحاشية الداخلية والإطار. بمعنى آخر، العرض والارتفاع اللذان تحددهما هما الحجم الكلي للعنصر، ويتم تقليل حجم المحتوى تلقائيًا لاستيعاب الحاشية الداخلية والإطار.

    • مثال: إذا كان عرض العنصر 200px، والحاشية الداخلية 10px من كل جانب، والإطار 5px من كل جانب، فإن العرض الكلي للعنصر سيظل 200px. سيتم تقليل عرض المحتوى إلى 170px (200 - (10 * 2) - (5 * 2)).

متى نستخدم box-sizing: border-box؟

يُوصى باستخدام box-sizing: border-box بشكل عام، لأنه يُسهل التحكم في أحجام العناصر ويجعل التخطيط أكثر قابلية للتنبؤ. يُستخدم بشكل خاص في الحالات التالية:

  • التصميمات سريعة الاستجابة (Responsive Design): عند استخدام نسب مئوية للعرض، يُساعد border-box على منع تجاوز العناصر لحدود الحاوية.
  • نماذج التخطيط (Layout Models): يُسهل استخدام border-box في نماذج التخطيط مثل Flexbox و Grid.
  • التصميمات المعقدة: يُساعد border-box على تبسيط حسابات الأحجام ويقلل من احتمالية حدوث أخطاء في التخطيط.

كيفية استخدام box-sizing: border-box على جميع العناصر:

يُمكن تطبيق box-sizing: border-box على جميع العناصر في الصفحة باستخدام قاعدة عامة:

CSS
*,
*::before,
*::after {
  box-sizing: border-box;
}

هذه القاعدة تُطبق box-sizing: border-box على جميع العناصر وعناصرها الزائفة (::before و ::after).

مثال يُوضح الفرق بين content-box و border-box:

HTML
<!DOCTYPE html>
<html>
<head>
<title>مثال على box-sizing</title>
<style>
.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 10px solid black;
  margin-bottom: 20px;
}

.content-box {
  box-sizing: content-box; /* القيمة الافتراضية */
  background-color: lightblue;
}

.border-box {
  box-sizing: border-box;
  background-color: lightcoral;
}
</style>
</head>
<body>

<div class="box content-box">content-box</div>
<div class="box border-box">border-box</div>

</body>
</html>

في هذا المثال، كلا الصندوقين لهما نفس العرض والارتفاع والحاشية الداخلية والإطار. ومع ذلك، فإن الصندوق الذي يستخدم box-sizing: content-box سيكون عرضه الكلي أكبر من 200px، بينما الصندوق الذي يستخدم box-sizing: border-box سيظل عرضه الكلي 200px.

باختصار، خاصية box-sizing تُعتبر من الخواص الهامة في CSS التي تُساعد على التحكم في أحجام العناصر وتُسهل عملية تصميم وتطوير صفحات الويب. استخدام box-sizing: border-box يُعتبر ممارسة جيدة يُوصى بها بشكل عام.