ویژگی box-sizing در CSS

box-sizing Property

ویژگی box-sizing در CSS مشخص می کند که طول و عرض کلی عنصر چگونه محاسبه شود.

در حالت پیشفرض وقتی طول و عرض (height & width) عنصر را مشخص می کنیم و سپس به آن padding یا border اضافه می کنیم، اندازه نهایی عنصر برابر است با طول و عرض داده شده + اندازه padding + اندازه border. مرورگر در حالت پیشفرض اندازه باکس محتوا (content box) را معیار قرار می دهد. این بدین معنیست که باید اندازه border و padding را در نظر گرفته و سپس مقادیر عرض و طول را مشخص نماییم:

در عرض = عرض نهایی padding + در عرض border
در طول = طول نهایی padding + در طول border

نحوه نوشتار

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

مقادیر

content-box​

این مقدار پیشفرض برای این ویژگی در نظر گرفته شده است. اندازه نهایی ویژگیهای width و height شامل باکس محتوا (content box) بوده و شامل padding، border و margin نمی باشد.

border-box​

اندازه ویژگیهای width و height شامل باکس محتوا، padding و border می باشد، اما margin را شامل نمی شود.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

<div class="box1">
    <div class="box2">این یک متن نمونه است</div>
</div>
<div class="box3">
    <div class="box4">این یک متن نمونه است</div>
</div>

css

.box1,
.box3 {
    width: 120px;
    height: 100px;
    border: 20px solid red;
}
.box2,
.box4 {
    width: 100%;
    border: 14px solid lightgreen;
    padding: 10px;
}
.box2 {
    box-sizing: content-box;
}
.box4 {
    box-sizing: border-box;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.