آموزش تغییر padding و border بدون تغییر width در CSS

قوانین شیوه‌نامه‌های CSS به صورت پیش‌فرض عرض عناصر را با جمع‌کردن width و padding و border محاسبه می‌کنند. به عبارت دیگر اگر برای یک عنصر قانون CSS به شکل زیر را تعریف کنیم، عرض آن با جمع مقادیر ۱۰۰ و ۱۰ و ۴ مساوی ۱۱۴ پیکسل خواهد بود. در ادامه روشی برای تغییر این عملکرد پیش‌فرض معرفی خواهیم کرد.

دقت کنید که padding و border در سمت چپ و راست قرار می‌گیرند و در نتیجه ۵ پیکسل و ۲ پیکسل در ۲ ضرب خواهند شد.

ویژگی box-sizing

ویژگی box-sizing در CSS ابزاری است که روش محاسبه‌ی عرض را از حالت پیش‌فرض تغییر می‌دهد. با مقداردهی به این ویژگی به شکل زیر می‌توانیم padding و border را بخشی از width به حساب آوریم نه به عنوان اضافه. به عبارت دیگر با دستورات زیر، عرض کل عنصر ۱۰۰ پیکسل خواهد بود و عرض محتوای اصلی ۱۰۰ منهای ۱۴ یا ۸۶ پیکسل:

 


مشاهده‌ی تمامی نوشته‌ها در گروه: CSS.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *