为什么内联块的内容会影响其在容器中的位置

Question

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 上的填充会影响整个div的位置。

这里发生了什么？我希望两个按钮出现在同一条线上，并且根本不能理解为什么它们不是。这是渲染引擎中的错误吗？

更新 Narendra建议一个简单的解决方案 - 浮动：离开按钮。我想弄清楚为什么会出现这种错位。

Answer 1

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

这是来自specs的图表，其中说明了：

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

作为解决方法，请使用vertical-align: top或bottom，甚至是middle。

---

修改：图片来自表部分，the situation对于内联块略有不同。

Answer 2

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

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

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

Answer 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*/
}