Question

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

当创建两个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，我们也会得到相同的结果。到底发生了什么？

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属性两者是不同的，一个是顶部，另一个是基线：

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的基线对齐，即使它们没有流内容。

Answer 1

之所以会这样，是因为内联元素的默认vertical-align值为baseline。

然后问题变成：inline-block元素的基线是什么？在这里，我们必须区分有无flow content的元素：

对于具有流内容的元素，例如您问题中的left div，基线与最后一个内容元素的基线相同。^{（*）< / sup>对于left div，它对应于内部span的基线。

_{（*）设置元素的溢出时，还有一些其他注意事项，但我将其排除在范围之外。}}

对于没有流内容的元素，例如问题中的right div，基线是元素的空白框的底部。对于right div，它对应于div本身的底部。

因此，总而言之：之所以看到垂直移动，是因为元素是根据元素的基线垂直对齐的，而元素的基线和基线的计算方式不同。

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

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>

Answer 2

显示：行内块值

与display：inline相比，主要区别在于display：inline-block允许在元素上设置宽度和高度。

此外，在显示方式上：内嵌块，尊重上边距和底边距/内边距，但在显示方式上：内嵌边距不遵守。

与display：block相比，主要区别在于display：inline-block不会在元素后添加换行符，因此该元素可以位于其他元素旁边。

和

不好意思，textarea是内联代码，但是哪行是正确的，浏览器认为第二个内联块的底部是行的位置，因此当他去画孩子时，他看到文本区域必须是内联的，并将其位置更改为第二个内联块的底部是行的位置，因为它是任何填充，并且其位置是相对的，因此到父div移到底部只是为了使textarea内联

这是CSS中的错误吗？

2 个答案: