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