Box Sizing

« صفحهٔ قبل

صفحهٔ بعد »

Box Sizing در CSS

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

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

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

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

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

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

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

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

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

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

مثال

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

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

مشاهدهٔ نتیجه

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

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

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

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

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

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

مثال

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

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

مشاهدهٔ نتیجه

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

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

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

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

مثال

* {
  box-sizing: border-box;
}

مشاهدهٔ نتیجه

ویژگی Box Sizing در CSS

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

« صفحهٔ قبل

صفحهٔ بعد »