درود

بهتره که براساس نوع طراحی ازش یکبار در بخش body استفاده کنید. تا برای همه یک قانون برقرار باشه.

هر المان به طور ذاتی دارای چهار ناحیه هست:

ناحیه محتوا (content-box), ناحیه فاصله داخلی (padding-box) و ناحیه حاشیه (border-box) و ناحیه فاصله خارجی یا (margin-box)

در حالت عادی زمانی که عرض و ارتفاع یک عنصر تعیین میشه این اندازه‌ها به ناحیه محتوا (content-box) اضافه میشه. اگر بخواید متنی رو در همان عنصر قرار بدید نیاز به یک فاصله داخلی یا همون پدینگ(padding) برای ایجاد یک فضا بین حاشیه عنصر و متن دارید. با اعمال پدینگ عرض و ارتفاع عنصر تحت تاثیر قرار گرفته و مقادیری که تعیین کرده بودید برقرار نیست و معمولا بزرگتر میشه.

با استفاده از box-sizing میتونید مشخص کنید که مقادیر دقیقا به کدوم ناحیه تخصیص پیدا کنه. فهم این مفهوم با شکل خیلی راحتتره، بنابراین پیشنهاد میکنم چند مثال تصویری ازش ببینید تا بهتر متوجه بشید.