Почему результат встроенного блока отличается между Firefox и Chrome?

Question

Я помещаю элементы рядом, используя inline-block.Я хотел сделать зазор между элементами 2px, поэтому я установил отрицательное поле для элемента span.

* {
  margin: 0;
}

.content {
  width: 100%;
  min-width: 320px;
}

span {
  display: inline-block;
}

span {
  display: inline-block;
  width: 78px;
  padding: 3px 10px;
  cursor: pointer;
  background: #ddd;
  color: #777;
  margin-right: -2px;
  width: calc(25% - 22px);
}

span:hover {
  background: #eee;
}

<div class="content">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
</div>

---

Вопрос 1 .Это работало с Firefox 64.0.Однако при проверке с помощью Google Chrome 71.0 последний элемент span обошел стороной.Размер шрифта в браузере по умолчанию составляет 16 пикселей для Firefox и Chrome.

Кроме того, он прекрасно работал в CodePen , но не работал должным образом с фрагментом кода stackoverflow.

Почемуэти проблемы возникают?Я прочитал приведенный ниже вопрос, но, похоже, он не является причиной этой проблемы.

• Как удалить пробел между элементами inline-block?

Снимок экрана в Firefox (версия CodePen): Снимок экрана с Firefox (версия фрагмента запуска stackoverflow): Снимок экрана в Google Chrome:

---

Вопрос 2 .Я установил width: 25%, чтобы сделать элемент span полной шириной.Однако горизонтальная ширина не стала полной, если 22 пикселя не было вычтено из 25% (в Firefox).

Как рассчитать значение 22px?Я не могу понять, почему (padding-left + padding-right)*4 - negative-margin = 22px, хотя padding-left и padding-right установлены в каждом элементе span (всего 80 пикселей).

Я прочитал вопрос ниже, но он не появляетсячтобы быть причиной этой проблемы.

• CSS включает в себя ширину отступа?