آخرین بازبینی: ۱۴۰۳/۱۰/۲۶

معرفی و کاربرد box-sizing در CSS

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

<style>
	div {
		width: 100px;
		padding: 5px;
		border: 2px solid #000;
	}
</style>

<div>روکا</div>

<style>

div {

width: 100px;

padding: 5px;

border: 2px solid #000;

}

</style>

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

ویژگی box-sizing

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

<style>
	div {
		box-sizing: border-box;
	
		width: 100px;
		padding: 5px;
		border: 2px solid #000;
	}
</style>

<div>روکا</div>

<style>

div {

box-sizing: border-box;

width: 100px;

padding: 5px;

border: 2px solid #000;

}

</style>

انجام این‌کار مزیت‌های مختلفی به دنبال دارد که مهم‌ترین آن کنترل بیشتر روی ابعاد واقعی هر عنصر است. به ویژه زمانی که در حال طراحی سایت واکنش‌گرا هستید، با تنظیم box-sizing می‌توانیم یک طراحی Pixel Perfect داشته باشیم و محل دقیق قرارگیری هر عنصر و ابعاد محتوای تحت کنترل بیشتری را به دست بیاوریم.

معرفی و کاربرد box-sizing در CSS

ویژگی box-sizing

بیشتر بخوانید:

دیدگاهتان را بنویسید لغو پاسخ