为什么内联元素只有上边框溢出？为什么不离开边框？

我有一个 div 容器（固定宽度和高度），其中包含一个边框为 10px 的内联元素。 内联元素的上边框溢出。为什么不离开边框？ 下面是我的代码。

.container {
	width:100px;
	height:100px;
	border:1px solid black;
}
span {
	border:10px solid red;
	display:inline;
}

<div class = "container">
  <span>
  this is text
</span>
</div>

内联元素的顶部和底部边框对其布局或周围框的布局没有影响。只有它的左右边框可以——这些边框，以及左右边距和填充，将内容推离周围的框。来自spec https://www.w3.org/TR/CSS21/visuren.html#inline-formatting:

这些框之间遵循水平边距、边框和填充。