ویژگی box-sizing در CSS3

10 / 10
از 1 کاربر

در این مقاله در مورد ویژگی box-sizing در CSS3 و کاربرد آن در طراحی سایت صحبت می کنیم.

بدون ویژگی box-sizing در CSS3

به صورت پیش فرض عرض و ارتفاع هر عنصر به صورت زیر محاسبه ی شود:

width + padding + border= عرض واقعی یک عنصر

height + padding + border = ارتفاع واقعی یک عنصر

این بدین معنی است که، زمانی که شما عرض و یا ارتفاع یک عنصر را تنظیم می کنید، عنصر معمولا بزرگتر از آن چیزی که شما تنظیم کرده اید ظاهر می شوند ( زیرا عناصر border و padding به عنصر مشخص (عرض و یا ارتفاع) اضافه شده اند.). نمونه های زیر دو عنصر <div> را نشان می دهند که دارای عرض و ارتفاع مشخص شده یکسانی هستند.

1 div

 

عنصر <div> با عرض 300 و ارتفاع 100 پیکسل

(عنصر <div> کوچکتر)

 

2 div

 

 

 

عنصر <div> با عرض 300 و ارتفاع 100 پیکسل

(عنصر <div> بزرگتر)

دو عناصر <div> بالا با داشتن عرض و ارتفاع یکسان، دارای اندازه متفاوتی هستند (زیرا div2 دارای یک padding مشخص است). کد نویسی دو عنصر <div> بالا در طراحی سایت به صورت زیر است:

.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}

.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}

بنابراین تا مدت ها در طراحی سایت، عرض و ارتفاع را کوچکتر از آنچه که مورد نیاز بود مشخص می کردند زیرا باید padding و border ها را از آن تفریق می کردند.
اما با استفاده از CSS3 در طراحی سایت ، این مشکل با روی کار آمدن ویژگی box-sizing برطرف شد.

ویژگی box-sizing در CSS3

این ویژگی این امکان را به ما می دهد تا padding و border را در یک عنصر نهایی عرض و ارتفاع مشمول کنیم. هنگامی که شما برای این ویژگی، border-box را مانند مثال زیر بنویسید، مشکل مذکور برطرف خواهد شد.

.div {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}

از زمان ارائه این ویژگی در طراحی سایت ، طراحان سایت از آن بهره زیادی برده اند.

ارسال نظر و نظرات ثبت شده