为什么内联元素的顶部边框会溢出？为什么不是左边框？

Question

我有一个固定宽度和高度的div容器，其中包含一个带有10像素边框的内联元素。 为什么内联元素的顶部边框会溢出，而左侧边框则不会呢？ 以下是我的代码。

.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>

- Mirajul Momin

---

因为您将元素的高度增加了20个像素，它超出了容器的行高，因此从顶部突出。要么调整容器的行高为字体大小+20px，要么使span成为内联块。 - Pete

但是这些都没有真正解释“为什么”……这很有趣。 - Paulie_D

@Paulie_D - 行高解释为什么：line-height CSS 属性设置用于文本等行的空间量。对于块级元素，它指定元素内行框的最小高度。对于非替换的内联元素，它指定用于计算行框高度的高度。 - Pete

...或者这个 - https://www.w3.org/TR/CSS2/visudet.html#line-height - Paulie_D

@Temani Afif：令人惊讶的是找不到任何东西。 - BoltClock

Answer 1

行内元素的顶部和底部边框对其布局或周围盒子的布局没有影响。只有其左侧和右侧边框会影响其布局，加上左右外边距和填充，会将内容推离周围盒子更远。根据 规范：

这些盒子之间将尊重水平外边距、边框和填充。

- BoltClock

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>

- Girisha C

Answer 3

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

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

- user1618811