border-box не работает на элементах inline-block?

Question

У меня есть список inline-block элементы, и я хочу добавить границу к элементу, над которым вы наводите курсор. Однако обратите внимание, как граница смещает элемент, даже когда я использую box-sizing: border-box и явно определить ширину и высоту элементов. Я проиллюстрировал поведение ниже:

* { box-sizing: border-box }

ul { font-size: 0 }

li {
  display: inline-block;
  width: 100px; height: 40px; margin: 10px;
  font-size: 20px; text-align: center;
  background-color: #FFF176;
}

li:hover { border: 5px dashed grey }

<ul>
  <li>hover</li>
  <li>over</li>
  <li>me!</li>
</ul>

Лучшее решение, которое я нашел, это использовать outline а также outline-offset вместо border, но мне бы очень хотелось узнать, почему мой оригинальный метод не работает:/

ОБНОВЛЕНИЕ: В то время как BoltClock дал действительно отличное объяснение и предложение (это было все, о чем я просил), я просто хотел упомянуть, что полностью забыл о flexbox, который решил практически все проблемы, которые у меня были с встроенными элементами. Я объединил его с трюком с прозрачной границей BoltClock для моего окончательного решения JSFiddle

Answer 1

Теперь я вижу проблему. Что происходит то box-sizing: border-box вызывает уменьшение поля содержимого каждого элемента как по горизонтали, так и по вертикали после добавления границы. Поскольку ваши элементы являются встроенными блоками, вертикальное сжатие влияет на базовую линию элемента, на который наведен курсор, и, следовательно, на базовую линию линии, на которой он находится, что приводит к смещению других элементов на той же строке. Если вы посмотрите внимательно, вы заметите, что текст на самом деле остается выровненным, что является целью смещения элементов.

Изменение границы на контур работает, потому что контуры спроектированы так, чтобы не влиять на макет (а также потому, что тогда вы полностью удаляете границы из рисунка).

Тем не менее, именно по этой причине использование контура таким образом дает значительно отличающийся эффект от вашего исходного эффекта с рамкой. Установка исходной прозрачной границы вместо контура гарантирует, что ваш контент будет смещен на правильную величину, независимо от того, видна ли граница на фоне (это было показано в предыдущем ответе, но, вероятно, оно было удалено, поскольку было отклонено):

* { box-sizing: border-box }

ul { font-size: 0 }

li {
  display: inline-block;
  width: 100px; height: 40px; margin: 10px;
  font-size: 20px; text-align: center;
  background-color: #FFF176;
  border: 5px dashed transparent;
}

li:hover { border-color: grey }

<ul>
  <li>hover</li>
  <li>over</li>
  <li>me!</li>
</ul>