`padding` и `border` для отображаемых встроенных элементов

Я хочу знать правила, касающиеся вертикального заполнения и вертикальных границ для встроенных элементов в контексте встроенного форматирования.

Диапазоны от span1 до span12 выравниваются на основе текста. Но у них все еще есть странная граница/отступы вокруг них, которые перекрывают окружающий контент.

Я пытаюсь выяснить основу для поведения в спецификации CSS. Вот что говорит спецификация: https://www.w3.org/TR/CSS22/box.html#margin-свойства

These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements.

Итак, margin-top и margin-bottom специально упоминаются как noop. Но спецификация ничего не говорит об отступах и границах для встроенных элементов. Это выведено откуда-то еще?

На самом деле здесь написано обратное: https://www.w3.org/TR/CSS22/visuren.html#inline-formatting

A line box is always tall enough for all of the boxes it contains. [...] Line boxes are stacked with no vertical separation (except as specified elsewhere) and they never overlap.

Что предполагает, что границы не должны были пересекаться.

Но и:

The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned.

что предполагает поведение, которое можно ожидать.

По сути, я пытаюсь понять, как это работает, основываясь на спецификации, даже если она явно определяет ее как неопределенную. FWIW, и Chrome, и Firefox ведут себя одинаково.

  .div1 {
  border: 10px solid black;
}

.div2 {
  border: 10px solid rgba(7, 154, 70, 0.5);
}

span:nth-child(2n) {
  border: 50px solid rgba(255, 0, 0, 0.5);
  background: rgba(0, 0, 255, 0.5);
  padding: 20px;
  margin: 10px;
  vertical-align: baseline;
}

<div class = "div1">
    Div1
</div>
<div class = "div2">
    Div2
    <span>Span1</span><span>Span2</span><span>Span3</span><span>Span4</span>
    <span>Span5</span><span>Span6</span><span>Span7</span><span>Span8</span>
    <span>Span9</span><span>Span10</span><span>Span11</span><span>Span12</span>
</div>