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

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

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

يمكن أن يؤدي ذلك إلى تبسيط حسابات التخطيط ومنع مشكلات التحجيم غير المتوقعة.

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

selector {
    box-sizing: value;
}

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

content-box: هذه هي القيمة الافتراضية. خاصيتا width و height تشملان فقط حجم المحتوى. تُضاف الحواشي (padding)، والحدود (borders)، والهوامش (margins) خارج العرض والارتفاع المحددين.

border-box: تتضمن خصائص width و height أحجام المحتوى، والحشوة (padding)، والحدود (border). لا تزال الهوامش تُضاف خارج العنصر.

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

div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box; /* السلوك الافتراضي */
}

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

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

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

التحدي

سهل

لقد تم تزويدك بمستند HTML يحتوي على قسمين (<div>)، لكل منهما فئة (class) مختلفة. مهمتك هي استخدام خاصية 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.

ورقة مرجعية

تحدد خاصية box-sizing كيفية حساب العرض والارتفاع الإجمالي للعنصر:

selector {
    box-sizing: value;
}

القيم:

content-box (افتراضي): يتضمن العرض والارتفاع حجم المحتوى فقط. يتم إضافة الحشوة (padding) والحدود (borders) في الخارج.
border-box: يتضمن العرض والارتفاع أحجام المحتوى والحشوة (padding) والحدود (border). لا تزال الهوامش (margins) تُضاف في الخارج.

/* مثال على content-box */
div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: content-box;
    /* العرض الإجمالي: 300px + 40px + 10px = 350px */
}

/* مثال على border-box */
.container {
    width: 400px;
    height: 300px;
    padding: 30px;
    border: 10px solid red;
    box-sizing: border-box;
    /* العرض الإجمالي: 400px (يتقلص المحتوى ليتناسب) */
}

جرّب بنفسك

<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>