CSS Box Sizing

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

برای کنترل این موضوع از خاصیت box-sizing استفاده می‌کنیم.

🔹 مقادیر Box Sizing

1. content-box (پیش‌فرض)

  • فقط محتوای اصلی شامل width و height میشه.

  • padding و border بهش اضافه میشن.

.box1 { width: 200px; height: 200px; padding: 20px; border: 10px solid black; box-sizing: content-box; /* پیش فرض */ }

👉 اندازه واقعی این المان:
200px (content) + 20px+20px (padding) + 10px+10px (border)
= 260px × 260px

2. border-box

  • width و height شامل محتوا + padding + border میشن.

  • باعث میشه اندازه‌ی واقعی المان همیشه همونی باشه که تعیین کردی.

.box2 { width: 200px; height: 200px; padding: 20px; border: 10px solid black; box-sizing: border-box; }

👉 اندازه واقعی این المان = 200px × 200px
(یعنی padding و border داخل همون 200px حساب میشن).

🔹 مثال تصویری

<div class="box1">Content Box</div> <div class="box2">Border Box</div>
div { margin: 20px; background: lightblue; } .box1 { width: 200px; height: 200px; padding: 20px; border: 10px solid blue; box-sizing: content-box; } .box2 { width: 200px; height: 200px; padding: 20px; border: 10px solid green; box-sizing: border-box; }

🔹 بهترین روش (Best Practice)

خیلی وقتا توسعه‌دهنده‌ها کل سایت رو روی border-box می‌ذارن چون محاسبه سایز راحت‌تر میشه:

* { box-sizing: border-box; }

✅ خلاصه:

  • content-box = width فقط محتوا. (پیش‌فرض)

  • border-box = width شامل padding + border. (خیلی کاربردی‌تر در طراحی ریسپانسیو)