با content-box، عدد width تنها بخش محتوا رو اندازه می‌گیره. وقتی کارت باید دقیقاً در فضای مشخصی جا بشه، جمع‌کردن padding و border با عرض محتوا می‌تونه دردسرساز بشه. box-sizing:border-box می‌گه عرض اعلام‌شده، فاصله داخلی و خط دور رو هم شامل بشه. مرورگر سهم این دو رو از فضای محتوا کم می‌کنه و عرض تا لبه خط همون عدد می‌مونه.
توی مثال عرض نهایی نشان ۱۶۰ پیکسله، با اینکه padding و border هم داره. توی فعالیت یک کارت ۲۴۰ پیکسلی می‌سازیم و هر دو سمت فضای داخلی باید حفظ بشن. خطای رایج کم‌کردن دستی padding از width و باقی‌گذاشتن content-box است؛ نتیجه شاید فعلاً جا بشه اما منطق اندازه‌گذاری خواسته‌شده رو بیان نمی‌کنه. ویژگی box-sizing رو روی خود کارت بنویس تا به تنظیم صفحه وابسته نباشه. این تصمیم اندازه فونت رو عوض نمی‌کنه و مقدار padding همچنان همون عددی است که خودت مشخص کرده‌ای؛ فقط تفسیر عرض فرق می‌کنه.
✍️ مثال حل‌شده:
<div class="badge">نشان</div>
<style>.badge { width:160px; padding:10px; border:2px solid teal; box-sizing:border-box; }</style>
حالا نوبت توئه: کارت .sized باید box-sizing:border-box، width:240px، padding:20px و border:2px solid navy داشته باشد؛ بنابراین عرض تا لبه خط دقیقاً ۲۴۰ پیکسل می‌ماند. متن و عنصر کارت را حفظ کن. width را برای جبران دستی فاصله‌ها کوچک‌تر نکن.
فعالیت شما
کارت .sized باید box-sizing:border-box، width:240px، padding:20px و border:2px solid navy داشته باشد؛ بنابراین عرض تا لبه خط دقیقاً ۲۴۰ پیکسل می‌ماند. متن و عنصر کارت را حفظ کن. width را برای جبران دستی فاصله‌ها کوچک‌تر نکن.