تحجيم الصندوق (Box Sizing)

جزء من قسم Styling with CSS في رحلة HTML على Coddy. الدرس 39 من 76.

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

يمكن أن يبسّط هذا حسابات التخطيط ويمنع مشكلات التحجيم غير المتوقعة.

إليك الصيغة الأساسية لاستخدام الخاصية box-sizing:

selector {
    box-sizing: value;
}

value: سلوك box-sizing المطلوب، والذي يمكن أن يكون واحدًا مما يلي:

content-box: هذه هي القيمة الافتراضية. خصائص width وheight تتضمن حجم المحتوى فقط. تتم إضافة الحشو والحدود والهوامش خارج العرض والارتفاع المحددين.

border-box: تتضمن خصائص width وheight أحجام content وpadding وborder. وتُضاف الهوامش خارج العنصر.

على سبيل المثال:

div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box; /* Default behavior */
}

.container {
    width: 400px;
    height: 300px;
    padding: 30px;
    border: 10px solid red;
    box-sizing: border-box;
}

في هذا المثال، يحتوي العنصر <div> على قيمة box-sizing تساوي content-box. وهذا يعني أن العرض الفعلي المعروض للعنصر <div> سيكون 300px (المحتوى) + 40px (‏padding الأيسر والأيمن) + 10px (الحد الأيسر والأيمن) = 350px. وسيُحسَب height بالطريقة نفسها.

من ناحية أخرى، فإن العنصر الذي يحمل الفئة container لديه قيمة box-sizing تساوي border-box. في هذه الحالة، سيتضمن width المحدد بقيمة 400px المحتوى والحشو والحدود. ستنكمش مساحة المحتوى الفعلية لاستيعاب الحشو والحدود، مما يؤدي إلى عرض محتوى يساوي 400px - 60px (الحشو الأيسر والأيمن) - 20px (الحد الأيسر والأيمن) = 320px. وسيُحسَب الارتفاع بالطريقة نفسها.

التحدي

سهل

لديك مستند HTML يتضمن عنصرَي (<div>)، ولكلٍّ منهما فئة مختلفة. مهمتك هي استخدام الخاصية box-sizing للتحكم في كيفية حساب عرض هذه العناصر وارتفاعها. اتبع الخطوات التالية:

اكتب قاعدة CSS تستهدف عنصر <div> الذي يحمل الفئة <strong>content-box-div</strong>. عيّن قيمة width إلى 300px، وقيمة height إلى 200px، وقيمة padding إلى 20px، وقيمة border إلى 5px solid blue، وقيمة box-sizing إلى content-box.
اكتب قاعدة CSS تستهدف عنصر <div> الذي يحمل الفئة <strong>border-box-div</strong>. عيّن قيمة width إلى 300px، وقيمة height إلى 200px، وقيمة padding إلى 20px، وقيمة border إلى 5px solid red، وقيمة box-sizing إلى border-box.

جرّب بنفسك

<html>
<head>
    <title>Box Sizing</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="content-box-div">This is a div with content-box.</div>
    <div class="border-box-div">This is a div with border-box.</div>
</body>
</html>