چرا؟! چون کار رو راحت می کنه همین. من زیاد اهل نوشته های طولانی نیستم و با احترام به دوست عزیزم Chris Coyier از گزافه گویی زیاد خوشم نمیاد برای همین میرم سره اصل مطلب...

box-sizing: border-box یعنی می خوام وقتی عرض یه المنت رو میزارم 100 پیکسل دیگه می خوام همین 100 پیکسل بمونه و هرچقدر هم padding و border بهش اضافه کنم نمی خوام این عرض بیشتر از 100 پیکسل بشه، همین.

در روش پیش فرض یعنی box-sizing: content-box هر چه قدر border و padding اضافه کنید، این مقدار به width هم اضافه میشه و اگه باکس ها رو float کرده باشین، قشنگ گند میزنه به همه چی.

در یک کلام box-sizing: border-box کار چینش صفحات سایت رو بسیار راحت تر می کنه.

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}