H1斷設計網格

Question

我有一個問題，每當我添加一個「H1」的標籤，以網格狀如下：

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

網格設計打破，請檢查下面的例子

http://jsfiddle.net/937yhqo1/

感謝您的幫助。

更新

爲@ chipChocolate.py answerd，垂直對齊解決了問題，但我想知道原因，爲什麼只是當我們添加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>