內聯div未正確對齊

Question

請參閱JSfiddle：http://jsfiddle.net/MU2y2/ 底部div未正確對齊，但找不到原因。 我認爲這必須與顯示內嵌塊有關。然而，沒有頂邊距

<div class="kaders"> 
<div class="rij"> 
    <div class="kader" href="http://www.checkjekamer.nl/check/huurZelfstandig"> 
     <h1>Zelfstandig</h1> 
     <p>Check hier je kamer als je in <b>zelfstandige</b> woonruimte woont</p> 
    </div> 

    <div class="kader" href="http://www.checkjekamer.nl/check/huurOnzelfstandig"> 
     <h1>Onzelfstandig</h1> 
     <p>Check hier je kamer als je in <b>onzelfstandige</b> woonruimte woont</p> 
    </div> 
</div> 

<div class="rij"> 
    <div class="kader" href="http://www.checkjekamer.nl/check/huurToeslag"> 
     <h1>Huurtoeslag</h1> 
     <p>Check hier de hoogte van je <b>huurtoeslag</b></p> 
    </div> 

    <div class="kader" href="http://www.checkjekamer.nl/check/brandveiligheid"> 
     <h1>Brandveiligheid</h1> 
     <p>Check hier de <b>brandveiligheid</b> van je kamer</p> 
    </div> 
</div> 

@import url(http://fonts.googleapis.com/css?family=Open+Sans); 


body{ 
    font-family:Open Sans; 
} 

/* background-color: #f7f7f7; 
    color:#d10000; 
*/ 

.kaders{ 
    text-align:center; 
} 

.kader{ 
    cursor:pointer; 
    display:inline-block; 
    width:200px; 
    height:200px; 
    background-color: #f7f7f7; 
    margin:10px; 
    margin-top:0; 
} 

.rij{ 
    display:block; 
    border:1px solid pink; 
} 

.kader h1{ 
    font-size:1.1em; 

} 

Answer 1

只需添加vertical-align: text-top;您.kader

瞭解更多關於vertical-alignhere

.kader{ 
    cursor:pointer; 
    display:inline-block; 
    width:200px; 
    height:200px; 
    background-color: #f7f7f7; 
    margin:10px; 
    margin-top:0; 
    vertical-align: text-top; 
} 

DEMO

Answer 2

添加vertical-align: top;到.kader。

CSS：

.kader{ 
    cursor:pointer; 
    display:inline-block; 
    width:200px; 
    height:200px; 
    background-color: #f7f7f7; 
    margin:10px; 
    margin-top:0; 
    vertical-align: top; 
} 

DEMO HERE