为什么内联块的内容会影响其在容器中的位置[重复]答案

【问题标题】：Why is content of the inline-block affects its position in the container [duplicate]为什么内联块的内容会影响其在容器中的位置[重复]
【发布时间】：2013-06-24 10:01:13
【问题描述】：

Here's a fiddle that shows my code in action

结果对我来说似乎很疯狂：在 Chrome 中，第二个按钮略高于第一个按钮。在 Firefox 中它略低于。

<div id="accounts">
  <button class="account">
     <h1>VISA Card</h1>
     <span class="balance">-433.18</span>
  </button>
  <button class="account">
     <h1 class="plus"><i class="icon icon-plus-sign"></i></h1>
     <span class="plus-text">Add Account</span>
  </button>
</div>

更让人困惑的是h1.plus上的padding会影响整个div的位置。

这里发生了什么？我希望两个按钮显示在同一行，并且根本不明白为什么它们不显示。这是渲染引擎的错误吗？

更新： Narendra 提出了一个简单的解决方法 - 浮动：离开按钮。我想首先弄清楚为什么会发生这种错位。

【问题讨论】：

标签： html css button positioning

【解决方案1】：

您使用的是display:inline-block，因此按钮通过其vertical-align 属性对齐，默认为baseline。

这是来自specs 的图表，它准确地说明了这一点：

您可以在前两个框中看到内容的填充和字体大小如何影响定位。

作为修复，使用vertical-align: top 或bottom，甚至middle。

编辑：图片来自 table 部分，the situation 与内联块略有不同。

【讨论】：

一定是这个。感谢您的参与。单元格的基线由其内容决定。规范说“单元格的基线是单元格中第一行文本的基线”，但经过一些实验后，我不相信是这种情况。 FF 和 Chrome 的差异是由于两种浏览器的默认按钮样式不同造成的。
@Paul 不完全是。我链接到规范的 table 部分，因为它包含一个漂亮的图像。但是，情况略有不同for inline-blocks：“'inline-block' 的基线是它在正常流中的最后一个行框的基线，除非它没有流入行框或者如果它的'overflow' 属性具有除 'visible' 以外的计算值，在这种情况下，基线是底部边距边缘。" 另请参阅此示例：jsfiddle.net/Gq3U8/26
@user123444555621，这是我发现的最好的问题之一。谢谢，对我很有帮助！

【解决方案2】：

将此添加到您的button.account：vertical-align: middle;。

您可能会丢失 display: inline-block; 属性，因为它不是必需的。

【讨论】：

vertical-align:middle 工作，谢谢。其他选项是“.account * {line-height: 20px; }”。但为什么呢？

【解决方案3】：

检查下面的代码

button.account {
    display: block;
    float: left;
    height: 80px;
    margin: 10px 10px;
    padding: 10px 5px;
    width: 170px;
}
.account h1 {
    font-size: 16px;
    height: 16px;
    margin: 0 0 5px;
    padding: 4px 0 2px;
}
.account .balance {
    display: block;
    font-size: 24px;
}

.account h1.plus {
    font-size: 24px;
    padding-top: 0px;
}

这是小提琴http://jsfiddle.net/Gq3U8/13/

【讨论】：

谢谢，我已经对您的代码进行了一些试验，唯一需要更改的是 float:left;。任何想法为什么没有它就无法工作？
float: left 使元素从窗口左侧开始排列。
我知道 float:left 的作用。但是为什么没有它就不行呢？浮动的一个问题是它们不会拉伸容器。为 div#accounts 或页面底部的某些内容添加边框，您会看到事情是如何分崩离析的。

【解决方案4】：

如果您使用inline-block，主要关注的是空白（您将看到元素周围的默认边距）。要解决这个问题，只需添加vertical-align:top，而不是使用float:left。它会将元素与顶部对齐。

.account {
    display: inline-block;
    vertical-align: top;   /*add this one*/
    margin: 10px 10px;     /*remove this one then can see whitespace*/
}

【讨论】：