CSS Box Sizing
📌 بهصورت پیشفرض، وقتی به یک المان width یا height میدی، اون فقط شامل محتوا (content) میشه.
ولی حاشیه داخلی (padding) و کادر (border) جداگانه بهش اضافه میشن. این باعث میشه بعضی وقتا اندازهها درست درنیاد.
برای کنترل این موضوع از خاصیت box-sizing استفاده میکنیم.
🔹 مقادیر Box Sizing
1. content-box
(پیشفرض)
-
فقط محتوای اصلی شامل width و height میشه.
-
padding و border بهش اضافه میشن.
👉 اندازه واقعی این المان:
200px (content) + 20px+20px (padding) + 10px+10px (border)
= 260px × 260px
2. border-box
-
width و height شامل محتوا + padding + border میشن.
-
باعث میشه اندازهی واقعی المان همیشه همونی باشه که تعیین کردی.
👉 اندازه واقعی این المان = 200px × 200px
(یعنی padding و border داخل همون 200px حساب میشن).
🔹 مثال تصویری
🔹 بهترین روش (Best Practice)
خیلی وقتا توسعهدهندهها کل سایت رو روی border-box میذارن چون محاسبه سایز راحتتر میشه:
✅ خلاصه:
-
content-box
= width فقط محتوا. (پیشفرض) -
border-box
= width شامل padding + border. (خیلی کاربردیتر در طراحی ریسپانسیو)