Почему min-height нажимает div на дно?

Question

div.left подталкивается к основанию, когда в CSS добавляется min-height. Может ли кто-нибудь объяснить, почему это происходит?

.left, .right { 
 
    width: 170px; 
 
    min-height: 150px; 
 
    border: 1px solid #666; 
 
    display: inline-block; 
 
}

<div class="left"> 
 
    <ul> 
 
    <li>Lorem ipsum 1</li> 
 
    <li>Lorem ipsum 2</li> 
 
    <li>Lorem ipsum 3</li> 
 
    <li>Lorem ipsum 4</li> 
 
    </ul> 
 
</div> 
 

 
<div class="right"> 
 
    <ul> 
 
    </ul> 
 
</div>

Answer 1

min-height не толкает его вниз, это происходит из-за vertical-align свойство (значение по умолчанию baseline). Если вы примените vertical-align: top к .left, проблема будет решена.