آموزش ویژگی box-sizing در CSS

ویژگی box-sizing، روش محاسبه ی عرض(width) و ارتفاع(height) یک عنصر را مشخص می کند: اینکه آیا باید در محاسبه، padding و border را نیز در نظر بگیریم یا خیر. به طور پیش فرض، محاسبه ی عرض(width) و ارتفاع(height) یک عنصر به صورت زیر است: 

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

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

.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 و border را در عرض و ارتفاع کلیِ یک عنصر اضافه کنیم(به حساب آوریم). اگر ویژگی و مقدار box-sizing: border-box; را برای یک عنصر مورد استفاده قرار دهیم، از padding و border در محاسبه ی عرض(width) و ارتفاع(height) آن عنصر استفاده می شود:

در زیر، مثال مشابهی را مشاهده می کنید که در آن از ویژگی و مقدار 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 ها و textarea ها در width: 100%; متفاوت به نظر می رسند همین است). 

اعمال این دستور به تمام عناصر، مطمئن و خردمندانه است:

* {
  box-sizing: border-box;
}

منبع: https://www.w3schools.com/css