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

Question

这是一个显示我的代码的小提琴

结果对我来说似乎很疯狂：在 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。

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

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

作为修复，使用vertical-align: topor bottom，甚至middle.

---

编辑：图像来自表格部分，内联块的情况略有不同。

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