خصوصیت شگفت‌انگیز Box-Sizing در CSS رو بشناسید!

سلام دوستان.

ویژگی Box-Sizing یه مفهوم کاملا ساده، کاربردی و البته مهمیه. درکش شاید کمتر از 5دقیقه طول بکشه اما می‌تونه سرعت توسعه پروژمون رو افزایش بده و کلی جاها استفادمون میشه.

این خصوصیت به ما اجازه میده تا نسبت به نحوه اعمال اندازه‌ها بر روی عناصرمون کنترل بهتری داشته باشیم. و یا به عبارت دیگه مشخص میکنه که مقادیر Padding و Border چجوری بر روی عنصرمون اعمال بشن.

این Property دو تا Value داره:

اول Content-Box (که مقدار پیش‌فرض هم هست)

و دومی Border-Box

یه مورد سومی هم قبلا وجود داشت به نام Padding-Box که باید بگم در حال حاضر منسوخ شده.

خب همونطور که می‌دونید هر عنصر به‌طور کلی از چهار قسمتِ Margin, Padding, Content و Border که در تصویر زیر میبینید تشکیل شده.

در حالت پیش‌فرض وقتی ما یک مقدار Width و Height ای رو برای عنصرمون تعیین می‌کنیم این مقادیر به قسمت Content تعلق می‌گیره. حالا اگه بیایم یه مقدار Padding و Border هم به عنصرمون اضافه کنیم این مقادیر جدای از Content محاسبه میشن و در حقیقت به Content اضافه میشن. خب اینایی که گفتیم یعنی چی؟ بیاین با یه مثال پیش بریم...

فرض کنید که ما یه div در صفحه داریم و مقادیر زیر رو براش Set کردیم:

div {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
}

در این مثال ما انتظار داریم که عرض عنصرمون 200 پیکسل و ارتفاع اون 100 پیکسل باشه. اما در حقیقت 20 پیکسل از اطراف به عنوان Padding به عنصر اضافه میشه و 5 پیکسل هم برای Border. در نهایت عرض عنصرمون 250 پیکسل (250 = 5+5+20+20+200 ) و ارتفاع اون 150 پیکسل ( 150 = 5+5+20+20+100 ) خواهد بود.

این مثال در حقیقت توضیح حالت Content-Box هست. وقتی خصوصیت Box-Sizing مقدار Content-Box داشته باشه (مقدار پیش‌فرض)، Padding و Border به عرض و ارتفاع عنصر اضافه میشه و اون رو بزرگ میکنه. یعنی عنصر در اغلب موارد بزرگتر از اون چیزی که شما تعیین کردید دیده میشه. به تصویر زیر دقت کنید.

در مقابل، مقدار Border-Box برای خصوصیت Box-Sizing باعث میشه که مقدار نسبت داده شده به Border و Padding هم جزوی از عرض و ارتفاع عنصر محاسبه بشه و با تغییر ابعاد، هر دفعه همچیز به طور خودکار محاسبه میشه و در نهایت نتیجه با مقدار Width و Height ای که شما مشخص کردید متفاوت نمیشه. به تصویر زیر دقت کنید.

کد زیر یک نمونه‌ی پیاده‌سازی شده از دو مقدار Content-Box و Border-Box هست که خروجی اون رو هم در شکل زیرش می‌تونید مشاهده کنید. ( این قطعه کد از سایت MDN گرفته شده.)

html

<div class=&quotcontent-box&quot>Content box</div>
<br>
<div class=&quotborder-box&quot>Border box</div>

css

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}
.content-box { 
  box-sizing: content-box; 
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
}
.border-box { 
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

Try it yourself: https://codepen.io/shadi-shirinbeik/pen/LYVKryb

حالا که با این ویژگی آشنا شدیم باید بگم بهتره که در همون ابتدای پروژه و قبل از استایل‌دهی به المنت‌هامون مقدار این خصوصیت رو ست کنیم. خب چجوری؟ خیلی سادست. کافیه کد زیر رو در فایل سی اس اس مون قرار بدیم.

*,
*::after,
*::before {
  box-sizing: border-box;
}

پیشنهاد می‌کنم خودتون هم حتما دست به کد شین و به صورت عملی در ادیتور این کدهارو اجرا کنید تا تجربه بهتر و قوی‌تری در ذهنتون ثبت بشه.

سازگاری مرورگرها با خصوصیت Box-Sizing:

امیدوارم این مقاله براتون مفید بوده باشه. نظر، انتقاد یا پیشنهادی اگر دارین خوشحال میشم بشنوم تا باهم بیشتر یاد بگیریم. موفق باشید...

References:

1. https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
2. https://medium.com/swlh/make-your-life-easier-with-css-box-sizing-3b6b2578bccd
3. https://www.w3schools.com/css/css3_box-sizing.asp