box-sizing

За долгое время, люди осознали, что обременять себя изнурительными вычислениями не очень весело, поэтому было создано новое свойство CSS под названием box-sizing. Когда вы устанавливаете box-sizing: border-box; для элемента, поля и границы самого элемента больше не увеличат его ширину. Здесь тот же пример, как и на предыдущей странице, но с использованием 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;
}

Поскольку так гораздо лучше, некоторые авторы хотят, чтобы все элементы на всех страницах всегда работали таким образом. Для этого нужно установить следующий CSS для страниц:

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

Это гарантирует, что размеры всех элементов могут быть определены более интуитивно.

Поскольку box-sizing достаточно новое свойство, вы должны использовать -webkit- и -moz- префиксы, как я в этих примерах. Эта техника позволяет реализовывать экспериментальные возможности в конкретных браузерах. Кроме того, имейте в виду, что один из них это IE8 и старше.