这是CSS中的错误吗？

Question

这可能听起来像一个过时的主题,因为由于flex-box和grid,没有人仍然使用内联块属性,但我想知道它,我想询问它.

当创建两个div并将它们分配为显示为内联块然后在其中一个中添加任何元素时,结果非常奇怪,其中包含该元素的div将向下滑动到另一个div的底部减去高度添加的元素.

div {
    display: inline-block;
    width: 100px;
    height: 150px;
    background: gray;
}

<div id="left">
  <span>Text</span>
</div>
<div id="right"></div>

为了解决这个问题,它只能将div垂直对齐到顶部,但奇怪的是,即使我们在不对齐受影响的对象的情况下对齐另一个不受影响的div,我们也会得到相同的结果,那么到底发生了什么这里？

div {
    display: inline-block;
    width: 100px;
    height: 150px;
    background: gray;
}

#left{
     vertical-align: baseline;
}

#right{
      vertical-align: top;
}

<div id="left">
  <span>text</span>
</div>
<div id="right"></div>

更新:

为了澄清事情,我删除了子元素并在两个div之外添加了一个文本,并添加了两个div,现在所有div都没有流内容,但前两个都有top属性,而后两个是不同的,一个顶部,另一个是基线:

div {
  display: inline-block;
  width: 100px;
  height: 150px;
  background: gray;
}
.right{
  vertical-align:baseline;
}
.left{
  vertical-align:top;
}

Text
<div class="right"></div>
<div class="left"></div>

<br>

Text
<div class="left"></div>
<div class="left"></div>

在第一种情况下,文本与顶部对齐,在下一次与div的基线对齐,即使它们没有流内容.

Answer 1

发生这种情况的原因是因为vertical-align内联元素的默认值是baseline.

然后问题变成:inline-block元素的基线是什么？在这里,我们必须区分具有和不具有流内容的元素:

• 对于具有流内容的元素(例如问题中的leftdiv),基线与最后一个内容元素的基线相同.^(*)对于leftdiv,这对应于内部的基线span.
  _{(*)设置元素溢出时还有一些额外的注意事项,但我会将其排除在范围之外.}
• 对于没有流内容的元素,例如问题中的rightdiv,基线是元素边距框的底部.对于rightdiv,这对应于div本身的底部.

因此,总结一下:您看到垂直移位的原因是因为元素根据其基线垂直对齐,并且具有和不具有内容的元素的基线以不同方式计算.

要测试它,只需尝试向rightdiv 添加一些文本,您将看到两个基线现在是如何相同的.

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: gray;
}

<div id="left">Text</div>
<div id="right">Other text</div>

通过设置字体大小的动画,下面的示例更清楚地说明了基线的变化如何影响垂直定位:

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: gray;
}

#left {
  transition: all 2s ease;
  animation: anim 2s infinite linear alternate;
}

@keyframes anim {
  0% {font-size: 100%;}
  100% {font-size: 300%;}
}

<div id="left">Text</div>
<div id="right"></div>