Box Sizing

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
CSS پیشرفته
۱گوشه‌های گرد
۲کادر تصاویر
۳پس‌زمینه‌ها
۴رنگ‌ها
۵Gradientها
۶سایه‌ها
۷افکت‌های متن
۸قلم‌های وب
۹2D Transforms
۱۰3D Transforms
۱۱Transitions
۱۲انیمیشن‌ها
۱۳Tooltip
۱۴استایل‌دهی تصاویر
۱۵ویژگی object-fit
۱۶دکمه‌ها
۱۷مثال‌های صفحه‌بندی (Pagination)
۱۸ستون‌های متعدد
۱۹رابط کاربری
۲۰متغیرها
۲۱Box Sizing
۲۲Flexbox
۲۳Media Queries
۲۴مثال‌های Media Queries
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

Box Sizing در CSS

ویژگی box-sizing به ما اجازه می‌دهد که در عرض و ارتفاع کل یک عنصر padding و کادر نیز داشته باشیم.[۱]

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

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

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

این بدان معناست: زمانی که شما عرض/ارتفاع یک عنصر را تنظیم می‌کنید، عنصر اغلب بزرگتر از آنچه تنظیم شده ظاهر می‌شود (زیرا کادر و padding عنصر به عرض/ارتفاع مشخص شده عنصر اضافه می‌شود).

تصویر زیر دو عنصر <div> با عرض و ارتفاع مشخص را نشان می‌دهد:

این div کوچکتر است (عرض ۳۰۰ پیکسل است و ارتفاع نیز ۱۰۰ پیکسل است).

این Div بزرگتر است (عرض این عنصر نیز ۳۰۰ پیکسل و ارتفاع آن نیز ۱۰۰ پیکسل است).

در نتیجه دو عنصر <div> با اندازه‌های متفاوت ظاهر شدند (زیرا padding عنصر div2 مشخص شده‌است):

مثال
 1 .div1 {
 2   width: 300px;
 3   height: 100px;
 4   border: 1px solid blue;
 5 }
 6 
 7 .div2 {
 8   width: 300px;
 9   height: 100px;
10   padding: 50px;
11   border: 1px solid red;
12 }


ویژگی box-sizing این مشکل را رفع کرده‌است.

با ویژگی box-sizing در CSS

ویژگی box-sizing به ما اجازه می‌دهد که padding و کادر را در مجموع اندازهٔ عرض و ارتفاع داشته باشیم.

اگر شما box-sizing: border-box; را بر روی عنصر تنظیم کنید، padding و کادر درون عرض و ارتفاع قرار می‌گیرند:

هر دو div هم‌اکنون اندازه یکسانی دارند!

در اینجا مثالی مشابه مثال بالا وجود دارد، با اضافه شدن box-sizing: border-box; به هر دو عنصر <div>:

مثال
 1 .div1 {
 2   width: 300px;
 3   height: 100px;
 4   border: 1px solid blue;
 5   box-sizing: border-box;
 6 }
 7 
 8 .div2 {
 9   width: 300px;
10   height: 100px;
11   padding: 50px;
12   border: 1px solid red;
13   box-sizing: border-box;
14 }


از آنجایی که نتیجه استفاده از box-sizing: border-box; خیلی بهتر است، بسیاری از توسعه دهندگان می‌خواهند تمامی عناصر روی صفحات آنان به این صورت کار کنند.

کد زیر اطمینان حاصل می‌کند که تمامی عناصر به روش بصری تری اندازه دهی می شوند. بسیاری از مرورگرها در حال حاضر از

box-sizing: border-box;برای بسیاری از عناصر فرم استفاده می‌کنند (اما نه همه آنها - که این دلیل نمایش متفاوت فیلدهای ورودی (inputها) و text areaها با عرض ۱۰۰٪ است).

اعمال این دستور بر روی تمامی عناصر کار امن و عاقلانه ای است:

مثال
* {
  box-sizing: border-box;
}


ویژگی Box Sizing در CSS

ویژگی توضیحات
box-sizing نحوه محاسبه عرض و ارتفاع یک عنصر را تعریف می‌کند: ایا می‌بایست padding و borderها را در بر گیرند یا خیر


منابع آموزشی