html - 标题顶部不需要的空间

Question

我有两个宽度为 300px 的框，显示为 inline block。父容器的宽度为 600px，font-size: 0。在这些框中，标题 h3 的上边距为 20px。现在，如果 h3 中的两个字符串相等， block 就会正确显示，但是一旦我使一个 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看看会发生什么。