Нежелательное место в верхней части заголовка

Question

У меня есть две коробки шириной 300px, отображаемые как inline block. Родительский контейнер 600px широкий с font-size: 0. В этих полях заголовок h3 имеет верхний край 20px. Теперь, если обе строки в h3 равны, блоки отображаются правильно, но как только я сделаю один h3 имеют меньшую строку, он опускается. Разве это не должно быть выровнено вверху? Как я могу это исправить?

HTML

<div class="post-pack-fix"> 

<div class="home-box"> 

<h3><a href="#">Some title of the</a></h3> 

<div class="meta"> 
<a href="#">wordpress</a>/2 days ago 
</div> 

<p> 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip 
<a href="#" class="more"> read more &raquo; </a></p> 

</div> 
<div class="home-box"> 

<h3><a href="#">Some title of the post related to this</a></h3> 

<div class="meta"> 
<a href="#">wordpress</a>/2 days ago 
</div> 

<p> 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip 
<a href="#" class="more"> read more &raquo; </a></p> 

</div> <!-- end home box --> 

</div> <!-- post pack fix --> 

Стили

.post-pack-fix { 
    font-size: 0; 
    margin-bottom: 23px; 
} 

.home-box { 
    width: 300px; 
    padding-right: 20px; 
    display: inline-block; 
} 

.home-box h3 { 
    color: #464646; 
    font-size: 20px; 
    margin: 20px 0 9px 0; 
    line-height: 23px; 
    font-weight: 400; 
} 

строки равны 'h3' отображается правильно

Answer 1

Добавить vertical-align: top к первому <div>.

Это вызвано тем, что два <div> s выравниваются по базовой линии по умолчанию (vertical-align: baseline), как вы можете видеть на картинке.

См. this JSFiddle в качестве рабочего примера. Попробуйте удалить vertical-align: top и посмотреть, что произойдет.

Answer 2

Свойство CSS по умолчанию для inline-block элементов: vertical-align:baseline. Итак, если вы хотите изменить выравнивание, примените его в коде home-box.

.home-box { 
    width: 300px; 
    padding-right: 20px; 
    display: inline-block; 
    vertical-align:top; 
}