سلام دوست من
فرض بفرمائید شما یک همچین استایلی دارید:
مخصوص اعضای ویژه 
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="div1">text in to the myDiv!</div>
</body>
</html>عرض این div رو ما ۳۰۰px گذاشتیم و بهش یدونه border هم دادیم که از هر طرف یک مرزی داشته باشه.
اگه الان خروجی این رو بگیرین عرض این div که مشخص شده 302px هستش. درحالی که شما گفتین 300px باشه.
حالا شما میاین برای رفع این مشکل که عرض و اینا به هم نریزه عرض div رو به ۲98px تغییر میدی که با border ای که گرفته جمعا ۳۰۰px باشه. به این صورت:
<head>
<style>
.div1 {
width: 298px;
height: 100px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="div1">text in to the myDiv!</div>
</body>
</html>و الان دیگه درسته همه چیز و شما عرض ۳۰۰px رو برای دیو تعیین کردی..
اما!
شما فرض کنید یک پروژه خیلی بزرگی رو بر عهده گرفتید. دیگه شما نمیتونید بیاید هر دقیقه با کم و زیاد شدن border عرض اون div رو هم تغییر بدین.
css کار ما رو راحت کرده و توی استایلاش box-sizing:border-box رو در اختیارمون قرار داده
خب حالا این استایل چیکار میکنه؟
این استایل دقیقا اون عرضی که ما برای div تعیین کردیم رو با وجود border و یا padding ٬ نگه میداره.
حالا شاید بپرسی پس اون border و padding من چی میشه؟
اون رو به صورت اوتومات از عرض خودش کم میکنه. و بخاطر همینه که در بیش از ۹۰ درصد پروژه هایی که دیدم و اگه شما هم ندیدین حتما میبینید در کد های پیش فرض تگ ها از box-sizing:border-box استفاده میشه.
کد زیر رو توی ادیتورتون قرار بدین٬ خروجی اش ر که ببینین بیشتر متوجه قضیه بشین.
<head>
<style>
.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;
}
.div3 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1">i have box-sizing:border-box and just border:)</div>
<br>
<div class="div2">i have box-sizing:border-box and padding and border:)</div>
<br>
<div class="div3">i dont have box-sizing:border-box style :(</div>
</body>
</html>طولانی بود ولی خواستم جامع و کامل توضیح داده باشم.
نظر استاد رو هم حتما ببینید چون شاید نکته ای یادم رفته باشه و استاد به اون اشاره کرده باشه.
موفق باشید.
با سلام خدمت شما همراه عزیز
ممنون از دوست عزیزمون کاملا صحیح فرمودن
