box-sizing

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

.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

از آنجایی که اینطوری خیلی بهتر است، برخی از طراحان ترجیح می‌دهند که همه ی عناصر صفحه این طوری باشند، به همین دلیل کد‌های زیر را به ابتدای کدهای خودشان اضافه می‌کنند:

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

با این کار، حتما همه ی عنصر‌های صفحه به این شکل خواهند شد.

از آنجایی که box-sizing جدید است، شما باید از پیشوندهای -webkit- و -moz- برای آن استفاده کنید، همان طوری که من در این مثال‌ها همین کار را کرده ام. این تکنیک، ویژگی‌های آزمایشی را در مرورگرهای خاصی فعال می‌کند. همچنین برای IE8 به بعد بررسی بیشتری را انجام دهید.