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