标题顶部的不需要的空间

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;
}

等于＆＃39; h3＆＃39;字符串显示正确

Answer 1

将vertical-align: top添加到第一个<div>。

这是因为默认情况下（<div>）两个vertical-align: baseline在基线上排成一行，如图所示。

请参阅this JSFiddle作为工作示例。尝试删除vertical-align: top，看看会发生什么。

Answer 2

inline-block元素的默认CSS属性为vertical-align:baseline。因此，如果您想更改对齐方式，请将其应用于home-box代码。

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