Почему CSS поля слева и справа увеличивают размер элемента?

Question

У меня есть следующий код:

* {
  box-sizing: border-box;
}

.blue {
  color: #fff;
  background-color: blue;
  flex: 0 0 50%;
  max-width: 50%;
  padding: 0 15px;
}

.violet {
  color: #fff;
  background-color: blueviolet;
  flex: 0 0 50%;
  max-width: 50%;
  padding: 0 15px;
}

.div {
  background: black;
  color: white;
  margin: 50px auto;
  display: flex;
  margin-left: -15px;
  margin-right: -15px;
}

.xont {
  width: 60%;
  margin: auto;
  padding-left: 15px;
  padding-right: 15px;
}

<div class="xont">
  <div class="div">
    <div class="violet">This is div 1</div>
    <div class="blue">This is div 2</div>
  </div>
</div>

почему ширина элемента .div увеличивается на 30px Когда я устанавливаю отрицательное поле равным -15px для левых и правых?

Answer 1

Вот часть спецификации, которая описывает, как рассчитывается ширина элемента блока: https://www.w3.org/TR/CSS21/visudet.html#blockwidth.

Формула:

Следующие ограничения должны соблюдаться среди используемых значений других свойств:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

Вы также можете прочитать, что:

Если для 'width' установлено значение 'auto', любые другие значения 'auto' становятся равными '0', а из полученного равенства следует 'width'.

Так что отступы и границы у нас будут 0 и у нас будет:

'margin-left' + 'width' + 'margin-right' = width of containing block

тогда

'width' = width of containing block - 'margin-left' - 'margin-right'

Теперь ясно, что если поле будет отрицательным, ширина элемента увеличится за ширину содержащего блока.