در این مقاله در مورد ویژگی 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;
}
از زمان ارائه این ویژگی در طراحی سایت ، طراحان سایت از آن بهره زیادی برده اند.