دروس CSS - شرح الخاصية box-sizing

الخاصية box-sizing

الخاصية box-sizing تجعل حجم الحد (Border) و الحشو (Padding) يحسب مع العرض واﻹرتفاع للعنصر.

الخاصية تأخد قيمة border-box

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

العرض = الحد + الحشو + العرض المحدد
اﻹرتفاع = الحد + الحشو + اﻹرتفاع المحدد

width = border + padding + (width selected)
height = border + padding + (height selected)

هذا يعني عندما نقوم بتعيين عرض أو ارتفاع عنصر ما, فإن حجم العنصر غالبا ما يظهر أكبر من الحجم الذي قمنا بتحديده (ﻷن حدود العنصر(Border) و الحشو (Padding) يضاف إلى العرض أو اﻹرتفاع المحدد للعنصر).

الصور للتوضيح

يمكنك تجربتها بمثال بسيط كالتالى:

<style> 
.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}

.div2 {
    width: 300px;
    height: 100px;    
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}
</style>

<div class="div1">Both divs are the same size now!</div>
<br>
<div class="div2">Hooray!</div>

ستكون النتيجة كالتالي: