Box Sizing

Main Page Tutorial
موارد آموزشی
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ها را در بر گیرند یا خیر

صفحهٔ بعد»

«صفحهٔ قبل