التحكم الاحترافي في أبعاد العناصر باستخدام خاصية box-sizing في CSS

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

المتطلبات الأساسية

• معرفة أساسية بلغة CSS.
• محرر أكواد (Code Editor).
• متصفح ويب.

فهم النموذج الافتراضي: سلوك العناصر بدون box-sizing

عند التعامل مع عناصر الويب، قد تواجه موقفًا محيرًا. تخيل أن لديك عنصرين من نوع div قمت بتعيين نفس العرض (width) والارتفاع (height) لهما، ومع ذلك، يظهر العنصر الأول بحجم أكبر من الثاني. أليس هذا غريبًا؟ فمن الطبيعي أن نتوقع أن يكون لهما نفس الأبعاد تمامًا.

لفهم هذا السلوك، يجب أن ندرك أن نموذج الصندوق الافتراضي (CSS Box Model) يحسب أبعاد أي عنصر يقبل خاصيتي العرض (width) أو الارتفاع (height) بالصيغة التالية:

• العرض الإجمالي المعروض = width + padding (من الجانبين) + border (من الجانبين)
• الارتفاع الإجمالي المعروض = height + padding (من الأعلى والأسفل) + border (من الأعلى والأسفل)

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

دعنا نلقي نظرة على مثال عملي يوضح هذا الحساب:

.first-box {
    width: 200px;
    height: 100px;
    border: 8px solid blue;
    padding: 20px;
    background: yellow;
    /* العرض الكلي: 200px + (2 * 20px) + (2 * 8px) = 256px */
    /* الارتفاع الكلي: 100px + (2 * 20px) + (2 * 8px) = 156px */
}

.second-box {
    width: 200px;
    height: 100px;
    border: 8px solid blue;
    background: yellow;
    /* العرض الكلي: 200px + (2 * 8px) = 216px */
    /* الارتفاع الكلي: 100px + (2 * 8px) = 116px */
}

كما يتضح من المثال أعلاه، يقوم CSS بإضافة الهوامش الداخلية (padding) والحدود (border) إلى العرض (width) والارتفاع (height) المحددين مسبقًا. يعرض القيمة الإجمالية كحجم للعنصر، متجاهلاً بذلك الحجم الفعلي الذي قمت بتعيينه لعنصر div.

التحكم الدقيق: استخدام خاصية box-sizing في CSS

باستخدام خاصية box-sizing، يمكننا تغيير السلوك الافتراضي الذي شرحناه أعلاه. لنعد إلى نفس المثال ونضف خاصية box-sizing مع تعيين قيمتها إلى border-box، وسنلاحظ كيف يمكننا التحكم الفعلي في حجم العناصر. ستلاحظ أن عنصري div أصبحا الآن بنفس الحجم المتوقع.

الصيغة العامة

box-sizing: content-box;
box-sizing: border-box;

content-box: السلوك الافتراضي

تُعد content-box هي القيمة الافتراضية لخاصية box-sizing. في هذا الوضع، لا تأخذ الخاصية في الاعتبار قيم العرض (width) والارتفاع (height) المحددة للعنصر عند حساب الأبعاد النهائية. بمعنى آخر، إذا قمت بتعيين عرض عنصر ما إلى 200px، ثم أضفت حدودًا (border) بقيمة 8px وهامشًا داخليًا (padding) بقيمة 20px، فإن حجم الحدود والهوامش الداخلية سيُضاف إلى العرض النهائي المعروض. هذا يجعل العنصر أوسع من 200px.

div {
    box-sizing: content-box;
    width: 200px;
    border: 8px solid blue;
    padding: 20px;
    background: yellow;
    /* العرض الكلي: 200px + (2 * 20px) + (2 * 8px) = 256px */
}

كما يظهر في المثال أعلاه، ازداد حجم عنصر div تلقائيًا إلى 256px على الرغم من أنه كان محددًا في الأصل بـ 200px.

border-box: التحكم الكامل في الأبعاد

عندما تقوم بتعيين خاصية box-sizing إلى border-box، فإنك تخبر المتصفح بأن يأخذ في الاعتبار أي حدود (border) أو هوامش داخلية (padding) تم تعيينها ضمن العرض (width) والارتفاع (height) الكليين للعنصر. بمعنى آخر، إذا قمت بتعيين عرض عنصر ما إلى 200px، فإن هذه الـ 200px ستشمل أي حدود أو هوامش داخلية تضيفها، وسيتقلص صندوق المحتوى (content box) ليمتص هذا العرض الإضافي، مما يحافظ على الحجم الكلي المحدد.

div {
    box-sizing: border-box;
    width: 200px;
    border: 8px solid blue;
    padding: 20px;
    background: yellow;
    /* العرض الكلي: 200px - (2 * 20px) - (2 * 8px) = 144px */
}

كما يظهر في المثال أعلاه، تقلص حجم عنصر div تلقائيًا إلى 144px للحفاظ على العرض الكلي 200px، وذلك على الرغم من أنه كان محددًا في الأصل بـ 200px.

لفهم الفارق بشكل أوضح، يمكنك دمج الأمثلة السابقة وملاحظة كيف يختلف سلوك الصندوق مع content-box مقارنة بـ border-box.

الخاتمة

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

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

الخلاصة التقنية

تُعد خاصية box-sizing من أهم الأدوات التي يجب على كل مطور ويب إتقانها لتحقيق تحكم دقيق وفعال في تصميم الواجهات. إن تبني قيمة border-box كمعيار افتراضي (عبر استخدام * { box-sizing: border-box; }) في مشاريعك الجديدة يوفر عليك الكثير من الوقت والجهد في عمليات الحساب اليدوي، ويقلل من الأخطاء المتعلقة بتجاوز العناصر لأبعادها المتوقعة. بينما تحتفظ content-box بأهميتها في فهم النموذج الأساسي لـ CSS، فإن border-box هي الخيار العملي لمعظم سيناريوهات التصميم الحديثة، خاصة عند بناء أنظمة شبكية (grid systems) أو مكونات واجهة مستخدم معقدة تتطلب دقة متناهية في الأبعاد.