h1打破了网格中的设计

Question

我有一个问题，每当我向网格添加“H1”标签时，如下所示：

<div class="box">
    <h1>123</h1>
</div>

网格设计中断，请检查以下示例

http://jsfiddle.net/937yhqo1/

感谢您的帮助。

更新

as @ chipChocolate.py回答说垂直对齐解决了这个问题，但是我想知道原因，为什么我们在添加H1标签（任何带有显示块的标签）时网格中断？显示内联块在那一刻如何表现？

Answer 1

在vertical-align: top中使用display: inline-block和.box。

.container {
  height: 200px;
  background: blue
}
.box {
  height: 100px;
  display: inline-block;
  vertical-align: top;
  background-color: red;
  width: 50px;
  margin: 2px
}

<div class="container">
  <div class="box"></div>
  <div class="box">
    <h1>123</h1>
  </div>
</div>