这是CSS中的错误吗？ [英] Is this a bug in CSS?

问题描述

这听起来像是一个过时的话题，因为由于flex-box和grid，没有人仍然使用inline-block属性，但我对此很疑惑，我想查询一下。

This might sound like an outdated topic since no one still uses inline-block property thanks to flex-box and grid but I was wondering about it and I would like to inquire about it.

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

When creating two divs and assigning them both to display as inline-block and then adding any element inside one of them, the result is quite strange, where the div which contains that element will slide down to the bottom of the other div minus the height of the added element.

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

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

>

要解决此问题，仅将div垂直对齐到顶部就足够了，但是奇怪的是即使我们将另一个对齐，也可以得到相同的结果div如果不对齐受影响的div就不会受到影响，那么这里到底发生了什么？

To fix the issue it's only enough to align the div vertically to the top, but what is strange too is that we get the same result even if we align the other div which is not affected without aligning the affected one, so what exactly is happening here?

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>

>

更新：

为进一步说明，我删除了child元素，并在两个div之外添加了一个文本，并增加了两个div，现在所有div都没有流内容，但是前两个都具有top属性，而后两个不同，一个top和另一个是基线：

To clarify things more I removed the child element and added a text outside the two divs, and added two more divs, now all divs are without a flow content, but the first two both of them have a top property while the last two are different, one top and the other is baseline:

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的顶部对齐，而在下一个文本中，与div的基线对齐，即使它们没有流内容。

In the first case the Text aligned to the top and in the next aligned to the baseline of the divs even they don't have a flow content.

推荐答案

之所以会发生，是因为默认 vertical-align 的值为基线。

The reason this happens, is because the default vertical-align value for inline elements is baseline.

然后问题变成了：内联块元素的基线是什么？在这里，我们必须区分具有和没有流内容：

Then the question becomes: what is the baseline of an inline-block element? Here, we have to make a distinction between elements with and without flow content:

• 对于具有流内容的元素，例如 left div，基线与最后一个内容元素的基线相同。^（*）对于 left div，它对应于内部 span 的基线。
  
  _{（*）设置时还有一些其他注意事项}


• 对于元素没有流内容，例如 right div，基线是元素的边距框的底部。对于右 div，它对应于div本身的底部。

• For elements with flow content, such as the left div in your question, the baseline is the same as the baseline of the last content element.^(*) For the left div, this corresponds to the baseline of the inner span.
  _{(*) There are some additional considerations when setting the element's overflow, but I'll leave that out of scope.}
• For elements without flow content, such as the right div in your question, the baseline is the bottom of the element's margin box. For the right div, this corresponds to the bottom of the div itself.

因此，总结一下：之所以看到垂直偏移，是因为元素根据其基线垂直对齐，并且包含和不包含内容的元素的基线计算方式都不同。

So, to summarize: the reason you're seeing a vertical shift is because the elements are vertically aligned according to their baseline, and the baselines for elements with and without content are calculated differently.

要对此进行测试，只需尝试在右侧 div中添加一些文本，您将看到两个基准现在都相同。

To test this out, just try adding some text to the right div, and you'll see how both baselines are now the same.

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

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

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

By animating the font size, the example below demonstrates even more clearly how changes in the baseline affect vertical positioning:

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>

这篇关于这是CSS中的错误吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！