آموزش جامع HTML و CSS (قسمت 16) - box-sizing

x64
x64

چرا از border-box استفاده کنیم؟

مدیریت آسان اندازه‌ها: با استفاده از border-box، نیازی به محاسبه دستی عرض و ارتفاع با توجه به padding و border نیست.

سازگاری با طراحی ریسپانسیو: کنترل دقیق‌تری روی اندازه عناصر در طرح‌های واکنش‌گرا

مقادیر ممکن برای box-sizing:

content-box (مقدار پیش‌فرض):

عرض (width) و ارتفاع (height) فقط شامل محتوا (content) می‌شود.

padding و border به عرض و ارتفاع اضافه می‌شوند.

border-box:

عرض (width) و ارتفاع (height) شامل محتوا، padding و border می‌شود.

padding و border از عرض و ارتفاع کلی کسر می‌شوند.

نظرات

نماد کانال
نظری برای نمایش وجود ندارد.

توضیحات

آموزش جامع HTML و CSS (قسمت 16) - box-sizing

۰ لایک
۰ نظر

چرا از border-box استفاده کنیم؟

مدیریت آسان اندازه‌ها: با استفاده از border-box، نیازی به محاسبه دستی عرض و ارتفاع با توجه به padding و border نیست.

سازگاری با طراحی ریسپانسیو: کنترل دقیق‌تری روی اندازه عناصر در طرح‌های واکنش‌گرا

مقادیر ممکن برای box-sizing:

content-box (مقدار پیش‌فرض):

عرض (width) و ارتفاع (height) فقط شامل محتوا (content) می‌شود.

padding و border به عرض و ارتفاع اضافه می‌شوند.

border-box:

عرض (width) و ارتفاع (height) شامل محتوا، padding و border می‌شود.

padding و border از عرض و ارتفاع کلی کسر می‌شوند.

آموزش