h1 breaks the design in a grid

Question

I have an issue that whenever I add an "H1" tag to the grid like the following:

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

the grid design breaks, Please check the following example

http://jsfiddle.net/937yhqo1/

Appreciate your help.

Update

as @chipChocolate.py answerd that the vertical align solves the issue, but I want to know the reasons, why just when we add H1 tag(any tag with display block) the grid breaks? how does the display inline-block behave at that moment?

Answer 1

Use vertical-align: top alongwith display: inline-block in .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>