为什么仅内联元素的顶部边框溢出？为什么不留边界？

Question

我有一个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>

Answer 1

内联元素的顶部和底部边框对其布局或周围框的布局没有影响。只有它的左右边界才起作用-这些以及左右的边距和内边距将内容进一步推离周围的盒子。来自spec：

  

在这些框之间要注意水平边距，边框和填充。

Answer 2

顶部和底部边框不会影响内联元素，因为内联元素随页面内容一起流动。您可以在嵌入式元素上设置左右边框/边距/填充，但不能在顶部或底部设置，因为这会破坏内容的流动。

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

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

Answer 3

.container{
  width: 100px
  height: 100px
  border: 1px solid black
}

span{
  border: 10px solid red
  display: inline
  padding: 10px
  margin: 10px
}