سلام،

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

مثال با content-box:

  This is a test.

توی این مثال، عرض کلی دیو اینجوری حساب می‌شه:

• عرض محتوا: 200px
• پدینگ (چپ و راست): 20px + 20px = 40px
• حاشیه (چپ و راست): 10px + 10px = 20px

پس عرض کلی دیو می‌شه: 200px + 40px + 20px = 260px

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

وقتی که box-sizing: border-box رو استفاده می‌کنی، اندازه‌ی کلی المان (عرض و ارتفاع) شامل محتوا، پدینگ و حاشیه می‌شه. یعنی اندازه‌ای که توی CSS می‌نویسی، همون اندازه‌ایه که المان اشغال می‌کنه.

مثال با border-box:

  This is a test.

توی این مثال، عرض کلی دیو دقیقاً 200px می‌شه چون:

• عرض محتوا + پدینگ + حاشیه = 200px

اگه می‌خوای این ویژگی برای همه‌ی المان‌های صفحه استفاده بشه، می‌تونی این کد رو به CSS اضافه کنی:

* {
  box-sizing: border-box;
}

با این کار، همه‌ی المان‌ها از این قانون پیروی می‌کنن و اندازه‌ها دقیق‌تر می‌شن.

استاد گرامی فرمودید در هر دوصورت مجموع برابر با عرض محتوا +پدینگ + حاشیه شده!! تفاوتشون رو نفهمیدم....

مچکرم خانوم پاشائی عزیز خیلی لطف کردین :)