css - 为什么标题和日期不一致？

Question

这是我尝试设置样式的一些生成的 html 的片段。为什么日期与顶部对齐，但 h3 中的链接却没有？

使用开发工具，我可以看到链接与 h3 垂直居中对齐，但我无法以尝试使用垂直对齐或调整高度的任何方式更改它。

article {
  width: 400px;
}
article .date_posted {
  float: right;
  font-size: 12px;
}
article div.thumbnail {
  margin-right: 10px;
  width: 100px;
  height: 75px;
  float: left;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px red;
  vertical-align: text-top;
}
article div.title h3 {
  display: inline;
}
article div.title h3 a {
  font-size: 14px;
  font-family: Lato, sans-serif;
  font-weight: 900;
  color: red;
}

article:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

<article>
  <div class="uposts-part thumbnail" data-resize="1">
    <img width="288" height="230" src="http://site3.wpmu-subdomain.dev/wp-content/uploads/sites/3/2015/10/0f02bd48-7efe-3934-8f4b-093c81560333.jpg" class="attachment-post-thumbnail wp-post-image" alt="" style="margin-top: -2.5px; height: auto; width: 100%;">
  </div>
  <div class="uposts-part date_posted">
    <span class="date">23</span>, <span class="time">October</span></div>
  <div class="uposts-part title">
    <h3><a href="http://site3.wpmu-subdomain.dev/2015/10/23/dignissimos-deserunt-fugiat-at/" title="Dignissimos deserunt fugiat at sdfsfsd sdfsd s fsdf s ds fds df sdf sdf sd f  sd fsd d">Dignissimos deserunt fugiat at sdfsfsd sdfsd s fsdf s ds fds df sdf sdf sd f  sd fsd d</a></h3>
  </div>
</article>

JS fiddle :https://jsfiddle.net/xdfc8vnm/

Answer 1

article div.title {
  float: left;
  width: 233px;
  line-height: 1
}
article div .title h3 {
  display: inline;
  margin: 0;
}
article div.title h3 a {
  font-size: 14px;
  font-family: Lato, sans-serif;
  font-weight: 900;
  color: red;
  display: block;
}
article .date_posted {
  float: right;
  font-size: 12px;
  line-height: 1;
}