آموزش CSS - اندازه‌ جعبه (Box Sizing)

ویژگی Box Sizing

ویژگی Box Sizing برای مدیریت روش محاسبه اندازه نهایی عناصر در صفحه استفاده می‌شود.

از CSS2 به بعد، ویژگی Box Sizing به صورت زیر عمل می‌کرد:

width + padding + border = عرض واقعی و قابل رویت المان در صفحه

height + padding + border = ارتفاع واقعی و قابل رویت المان در صفحه

به عبارت دیگر، هنگامی که ارتفاع و عرض را مشخص می‌کنید، المان کمی بزرگتر از اندازه داده شده به نظر می‌رسد، چرا که حاشیه و مرز المان به ارتفاع و عرض آن اضافه می‌شود.

ویژگی Box Sizing در CSS2

<html>
   <head>
      <style>
         .div1 {
            width: 200px;
            height: 100px;
            border: 1px solid green;
         }
         .div2 {
            width: 200px;
            height: 100px;    
            padding: 50px;
            border: 1px solid pink;
         }
      </style>
   </head>

   <body>
      <div class = "div1">example.com</div><br />
      <div class = "div2">example.com</div>
   </body>
</html>

تصویر بالا دو المان با ارتفاع و عرض یکسان دارد، اما نتیجه متفاوت است، چرا که در المان دوم ویژگی Padding هم استفاده شده است.

ویژگی Box Sizing در CSS3

<html>
   <head>
      <style>
         .div1 {
            width: 300px;
            height: 100px;
            border: 1px solid blue;
            box-sizing: border-box;
         }
         .div2 {
            width: 300px;
            height: 100px;
            padding: 50px;
            border: 1px solid red;
            box-sizing: border-box;
         }
      </style>
   </head>

   <body>
      <div class = "div1">example.com</div><br />
      <div class = "div2">example.com</div>
   </body>
</html>

در نمونه بالا ارتفاع و عرض المان‌ها با استفاده از box-sizing:border-box مشخص شده است. نتیجه کد در زیر آمده است.

دو المان بالا با استفاده از box-sizing:border-box ایجاد شده‌اند، بنابراین نتیجه برای هر دو المان همیشه یکسان است، همانطور که در تصویر بالا نشان داده شده است.

مفهوم box-sizing: border-box چیست؟

box-sizing: border-box یک ویژگی در CSS است که رفتار اندازه‌گیری جعبه یک المان را کنترل می‌کند. به طور پیش‌فرض، وقتی شما در CSS عرض و ارتفاع یک المان را تنظیم می‌کنید، این مقادیر فقط بر روی جعبه محتوا اعمال می‌شوند. هر پدینگ یا حاشیه‌ای که به المان اضافه کنید، عرض یا ارتفاع کلی المان را افزایش می‌دهد.

زمانی که از box-sizing: border-box; استفاده می‌کنید، این رفتار تغییر می‌کند. عرض و ارتفاعی که برای المان تنظیم می‌کنید شامل هم جعبه محتوا و هر پدینگ یا حاشیه‌ای است که اضافه کنید. به عبارت دیگر، عرض و ارتفاع کلی المان ثابت می‌ماند و مرورگر به طور خودکار اندازه جعبه محتوا را تنظیم می‌کند تا پدینگ و حاشیه را دربرگیرد بدون افزایش ابعاد کلی المان.

اینجا یک مثال برای نمایش این تفاوت است:

بدون box-sizing: border-box;:

div {
    width: 300px;
    padding: 20px;
    border: 10px solid black;
}

در این حالت، عرض کلی المان div 340 پیکسل خواهد بود (300 پیکسل + 2 * 20 پیکسل پدینگ + 2 * 10 پیکسل حاشیه).

با box-sizing: border-box;:

div {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 10px solid black;
}

با box-sizing: border-box;، عرض کلی المان div ثابت می‌ماند و مرورگر اندازه جعبه محتوا را برای جاگیری از این ابعاد (شامل پدینگ و حاشیه) تنظیم می‌کند.

این ویژگی به ویژه در طراحی وب و وظایف طراحی آنی و ساختار، امتیاز بزرگی دارد، جایی که حفظ عرض یا ارتفاع ثابت برای المان‌ها بدون توجه به اندازه پدینگ یا حاشیه، فرآیند طراحی را ساده‌تر می‌کند و چیدمان‌های قابل پیش‌بینی‌تری را امکان پذیر می سازد.

واسط کاربری - درس قبلی

درس بعدی - واکنش‌پذیری