Почему второй div слайд вниз?

Question

У меня есть следующий код HTML/CSS:

.first, 
 
.second { 
 
    width: 200px; 
 
    height: 100px; 
 
    border: 1px solid #333; 
 
    text-align: center; 
 
    display: inline-block 
 
} 
 

 
.first > ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div class="first"><h1>first div</h1><ul><li>text</li></ul></div> 
 
<div class="second"><h1>second div</h1></div>

Почему второй ДИВ это скользит вниз, когда я поставил уль элемент внутри первого DIV?

JS Bin link, на всякий случай. Спасибо!

Answer 1

Поскольку значение по умолчанию vertical-align (относится к элементам на уровне строки и элементам таблицы) составляет baseline, вам необходимо использовать vertical-align: top.

.first, 
 
.second { 
 
    width: 200px; 
 
    height: 100px; 
 
    border: 1px solid #333; 
 
    text-align: center; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
.first > ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div class="first"> 
 
    <h1>first div</h1> 
 
    <ul> 
 
    <li>text</li> 
 
    </ul> 
 
</div> 
 
<div class="second"> 
 
    <h1>second div</h1> 
 
</div>