为什么这个 inline-block 元素被向下推? [英] Why is this inline-block element pushed downward?

问题描述

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

Following is my code and I want to understand that why #firstDiv is being pushed downward by all browsers. I really want to understand the inner workings of the fact that why its being pushed downward rather than pulling it upward by one way or another. (and I know how to align their tops :))

而且我知道它的溢出:隐藏是导致它的原因，但不确定为什么它会向下推动该 div.

And I know that its overflow:hidden which is causing it but not sure that why its pushing that div downward.

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/.

推荐答案

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

Basically you have added more clutter in your code which is creating more confusion so first I try to remove clutter which hinders understanding the real issue.

首先，我们必须确定真正的问题是什么?这就是为什么inline-block"元素被向下推的原因.

First of all we have to establish that what's the real question? Its that why "inline-block" element is pushed downward.

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

Now we start to understand it and remove the clutter first.

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

1 - Why not give all three divs same border width? Let's give it.

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

2 - Does floating element has any connection with inline-block element being pushed downward? No, it has nothing to do with it.

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

So, we have removed that div altogether. And you are witnessing same behavior of inline-block element being pushed downward.

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

Here comes the turn of some literature to grasp the idea of line boxes and how they are lined in the same line esp read last paragraph carefully because there lies the answer of your question.

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

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

如果您不确定基线，那么这里是简单的简要说明.

If you are not sure about baseline then here is brief explanation in simple words.

除gjpqy"之外的所有字符都写在基线上，您可以将基线想象成在这些随机字符"正下方绘制一条与下划线相同的简单水平线，那么它将是基线，但现在如果您写任何'gjpqy' 字符在同一行，然后这些字符的下部将落在该行下方.

All characters except 'gjpqy' are written on the baseline you can think of baseline as if you draw a simple horizontal line same as underlining right below these "random characters" then it will be the baseline but now if you write any of 'gjpqy' character(s) on the same line then lower part of these characters would fall below the line.

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

So, we can say that all characters except 'gjpqy' are written completely above the baseline while some part of these characters are written below the baseline.

3 - 为什么不检查我们线的基线在哪里?我添加了几个显示基线的字符.

3 - Why not check where is the baseline of our line? I have added few characters which show the baseline of our line.

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

4 - Why not add some characters in our divs too to find their baselines in the div? Here, some characters added in divs to clarify baseline.

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

Now when you understand about baseline, read the following simplified version about baseline of inline-blocks.

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

ii) 如果有问题的内联块的溢出属性设置为 OTHER THAN 可见.那么它的下边距将位于包含框行的基线上.

• 第一点详解

现在再次查看此内容以阐明您对绿色 div 发生了什么的概念.如果还有任何混淆，那么 这里在绿色 div 附近添加更多字符以建立包含块的基线，绿色 div 基线是对齐.

Now look at this again to clarify your concept that what's happening with green div. If yet any confusion then here is added more characters close to green div to establish the baseline of the containing block and green div baseline is aligned.

好吧，我现在声称它们具有相同的基线?对吗?

Well, I am now claiming that they have same baseline? RIGHT?

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

5 - Then why not overlap them and see if they are fit right one on another? So, I bring third div -left: 35px; to check if they have same baseline now?

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

Now, we have got our first point proved.

• 第二点详解

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

Well, after explanation of first point second point is easily digestible and you see that first div which has overflow property set to other than visible (hidden) has its bottom margin on the base line of the line.

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

Now, you can do couple of experiments to further illustrate it.

1. 设置第一个div溢出:可见(或完全删除).
2. 设置第二个div溢出:不可见.
3. 设置两个div都溢出:可见以外.

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

Now bring back your clutter and see if everything is looking to fine to you.

1. 带回 返回您的浮动 div(当然需要
   增加一些身体宽度)你看它没有效果.
2. 恢复相同的奇数边距.
3. 将 绿色 div 设置为溢出:在问题中设置可见(未对齐是由于边框宽度从1px 到 5px 所以如果调整负向左你会看到没有问题)
4. 现在删除我添加的其他字符以帮助理解.(当然要去掉负左)
5. 最后减小主体宽度，因为我们不再需要更宽的了.

1. Bring back your floated div (of course there is need to
   increase some width of body) You see it has no effect.
2. Bring back same odd margins.
3. Set green div to overflow: visible as you set in your question (that misalignment is due to increase of border width from 1px to 5px so if adjust negative left you'll see there is no issue)
4. Now remove additional characters I added to aid in understanding. (and of course remove negative left)
5. Finally reduce body width because we no longer need wider one.

现在我们又回到了起点.

And now we are back to where we started from.

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

Hopefully I have answered your question.

这篇关于为什么这个 inline-block 元素被向下推?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！