为什么这个 inline-block 元素被向下推？

小编典典

为什么这个 inline-block 元素被向下推？

all

以下是我的代码，我想了解 为什么 #firstDiv所有浏览器都被向下推。我真的很想了解
为什么它被向下推而不是以某种方式向上拉的事实的内部运作。（而且我知道如何对齐他们的上衣:)）

而且我知道它overflow:hidden;是导致它的原因，但不确定为什么它会div向下推动它。

body {
  width: 350px;
  margin: 0px auto;
}

#container {
  border: 15px solid orange;
}

#firstDiv {
  border: 10px solid brown;
  display: inline-block;
  width: 70px;
  overflow: hidden;
}

#secondDiv {
  border: 10px solid skyblue;
  float: left;
  width: 70px;
}

#thirdDiv {
  display: inline-block;
  border: 5px solid yellowgreen;
}


<div id="container">
  <div id="firstDiv">FIRST</div>
  <div id="secondDiv">SECOND</div>
  <div id="thirdDiv">THIRD
    <br>some more content<br> some more content
  </div>
</div>

http://jsfiddle.net/WGCyu/。

阅读 79

2022-05-22

共1个答案

小编典典

基本上，您在代码中添加了更多混乱，这造成了更多混乱，所以首先我尝试消除妨碍理解真正问题的混乱。

首先，我们必须确定真正的问题是什么？ 这就是为什么“inline-block”元素被向下推。

现在我们开始理解它并首先消除混乱。

1 - 为什么不给所有三个 div 相同的边框宽度？让我们给它。

2 - 浮动元素是否与被向下推的 inline-block 元素有任何联系？不，这与它无关。

所以，我们完全删除了那个 div。而且您正在目睹内联块元素被向下推的相同行为。

轮到一些文献来掌握线框的概念以及它们如何排列在同一行中，尤其是仔细阅读最后一段，因为这就是您问题的答案。

‘inline-block’ 的基线是其在正常流中的最后一个行框的基线，除非它没有流入行框，或者它的 ‘overflow’ 属性具有除
‘visible’ 之外的计算值，在在这种情况下，基线是底部边距边缘。

如果您不确定基线，那么这里是简单的简短解释。

除了’gjpqy’之外的所有字符都写在基线上你可以认为基线就像你在这些“随机字符”正下方画一条与下划线相同的简单水平线那么它将是基线但是现在如果你写任何’gjpqy’同一行上的字符，然后这些字符的下部将落在该行下方。

所以，我们可以说除了“gjpqy”之外的所有字符都写在基线之上，而这些字符的一部分写在基线之下。

3 - 为什么不检查我们生产线的基线在哪里？我添加了几个字符来显示我们行的基线。

4 - 为什么不在我们的 div 中添加一些字符以在 div 中找到它们的基线？在这里，在 div
中添加了一些字符以阐明基线。

现在，当您了解基线时，请阅读以下有关内联块基线的简化版本。

i) 如果有问题的 inline-block 将其溢出属性设置为可见（默认情况下不需要设置）。那么它的基线将是该行的包含块的基线。

ii) 如果有问题的 inline-block 的溢出属性设置为 OTHER THAN 可见。然后它的下边距将位于包含框线的基线上。

第一点详细

现在再看一遍，以澄清你的概念，即绿色 div
发生了什么。如果还有任何混淆，那么这里会在绿色 div
附近添加更多字符以建立包含块的基线，并对齐绿色 div 基线。

好吧，我现在声称他们有相同的基线？对？

5 - 那么为什么不将它们重叠起来，看看它们是否彼此合适？所以，我带来了第三个 div -left: 35px;
检查他们现在是否有相同的基线？

现在，我们已经证明了我们的第一点。

第二点详细

好吧，在解释了第一点之后，第二点很容易理解，您会看到溢出属性设置为可见（隐藏）以外的第一个 div 的底边距位于该线的基线上。

现在，您可以做几个实验来进一步说明它。

现在把你的杂物带回来，看看你是否一切都好。

带回你的浮动 div（当然需要
增加一些宽度）你看它没有效果。
带回相同的奇数边距。
将绿色 div 设置为溢出：在问题中设置时可见（未对齐是由于边框宽度从 1px 增加到 5px，因此如果向左调整负数，您会看到没有问题）
现在删除我添加以帮助理解的其他字符。（当然删除负左）
最后减少车身宽度，因为我们不再需要更宽的车身。

现在我们又回到了起点。

希望我已经回答了你的问题。

2022-05-22