具有行高的div中跨度的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

正如 cmets 中的其他解释，问题是您有一个固定高度 20px，并且您设置了一个从父级继承的 line-height 到 80px，因此行框高度更大，因此您有溢出。

如果您更改内部跨度的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>

现在为什么边框放在顶部？

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

将元素的基线与其父元素的基线对齐^ref

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

将元素的底部及其后代与底部对齐 整行。^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（行框的高度）定义，并且在逻辑上将是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>