box-sizing

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

Значением по умолчанию является content-box

box-sizing  — свойство CSS определяющее как будет вычисляться ширина и высота элемента

Хорошим примером, помогающим сделать все красиво на вашем сайте будет применение box-sizing например, когда на сайте имеется 3 карточки товара, у каждой из карточек ширина 33%, плюс к этому вы делаете border, который добавит вам ширины, а так же вы хотите иметь у этих блоков margin, то при значении box-sizing: content-box; 

Вы получите ситуацию, что третий блок не поместится в вашей сетке и будет либо жать в сторону родителя, либо перескочит на следующую строку. Но применив box-sizing: border-box;

Пример использования

Код HTML

<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div>

Код CSS

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box { 
  box-sizing: content-box; 
  /* Общая ширина блока: 160px + (2 * 20px) + (2 * 8px) = 216px
     Общая высота блока: 80px + (2 * 20px) + (2 * 8px) = 136px */
}

.border-box { 
  box-sizing: border-box;
  /* Общая ширина блока: 160px - (2 * 20px) - (2 * 8px) = 104px
     Общая высота блока: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

Вы получите результат, который дает увидеть простыми математическими вычислениями, что будет в результате применения значений свойства.

Удачи в развитии ваших проектов!