html - div 中具有行高的 span 的 css 边框，边框紧挨着顶部

Question

为什么跨度的边界在顶部旁边？如果我删除跨度的显示，它就可以工作。谢谢。

div {
  height: 80px;
  border: 1px solid green;
  line-height: 80px
}

.inner-span {
  height: 20px;
  display: inline-block;
  border: 1px solid red;
}

<div>
  <span class="inner-span">123123</span>
</div>

Answer 1

正如其他人在评论中解释的那样，问题是您有一个固定高度 20px 并且您设置了一个从父级继承的 line-height 80px 所以 line-box 高度更大，因此你有溢出。

如果您更改内部跨度的 line-height，它将得到修复:

div {
  height: 80px;
  border: 1px solid green;
  line-height: 80px
}

.inner-span {
  height: 20px;
  line-height: initial;
  display: inline-block;
  border: 1px solid red;
}

<div>
  <span class="inner-span">123123</span>
</div>

为什么边框要放在顶部？

这是因为默认对齐方式是基线，为了定义我们考虑文本的基线。

Aligns the baseline of the element with the baseline of its parent^ref

例如，如果将 vertical-align 更改为 bottom，您将看到边框位于底部。

Aligns the bottom of the element and its descendants with the bottom of the entire line.^ref

div {
  height: 80px;
  border: 1px solid green;
  line-height: 80px
}

.inner-span {
  height: 20px;
  display: inline-block;
  vertical-align:bottom;
  border: 1px solid red;
}

<div>
  <span class="inner-span">123123</span>
</div>

如果您添加overflow:auto 将清楚地了解溢出问题并且您还将change the baseline of the element to make it the bottom border :

div {
  height: 80px;
  border: 1px solid green;
  line-height: 80px
}

.inner-span {
  height: 20px;
  display: inline-block;
  overflow:auto;
  border: 1px solid red;
}

<div>
  <span class="inner-span">123123</span>
</div>

如果删除固定高度，您还会注意到元素的高度将由 line-height(line-box 的高度)定义，逻辑上为 80px:

div {
  height: 80px;
  border: 1px solid green;
  line-height: 80px
}

.inner-span {
  display: inline-block;
  border: 1px solid red;
}

<div>
  <span class="inner-span">123123</span>
</div>