box-sizing. Внутренний и внешний фокус элемента

Есть высота\ширина элемента, но за счет отступов она меняется. Можно вручную считать пиксели, высчитывать сколько из блоков на отступы со всех сторон уйдет.
Чтобы не мучаться есть свойство box-sizing — оно определяет поведение границ и внутренних отступов. По умолчанию для всех элементов действует правило box-sizing: content-box, границы и внутренний отступ расширяют элемент.
А если правило border-box, то границы и внутренний отступ отрисуются внутрь.
КАК НА КАРТИНКЕ.
* {
box-sizing:border-box;
} а так в стилях мы в самом начале для всех элементов сделали внутренний фокус