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

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

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

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

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

selector {
    box-sizing: value;
}

value: سلوك تحديد حجم الصندوق المطلوب، ويمكن أن يكون أحد الخيارات التالية:

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

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

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

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

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

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

التحدي

سهل

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

اكتب قاعدة CSS تستهدف عنصر <div> ذي الصنف content-box-div. عيّن width إلى 300px، وheight إلى 200px، وpadding إلى 20px، وborder إلى 5px solid blue، وbox-sizing إلى content-box.
اكتب قاعدة CSS تستهدف عنصر <div> ذي الصنف border-box-div. عيّن 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>