如何将链接文本向下推？

Question

所以我在本网站的内容区域有一个新闻栏目，它显示发布者的头像，标题，然后是小描述。

问题是，标题不能很好地与化身对齐，我认为它在我的垂直对齐的新闻文章之间创造了不必要的空间。

这就是它的样子：

我希望它看起来像：

相关代码：

#news {
	float: right;
	width: 45%;
}

#news h1 {
	font-weight: bold;
	background-color: #828CAA;
	font-size: 13px;
	margin-bottom: 2px;
	color: #FFFFFF;
	margin: 0px;
}

#news a {
	color: #00366C;
	margin-top: 3px;
	padding-left: 5px;
	font-weight: bold;
}

#news p {
	padding-left: 5px;
	display: inline;
}

#news img.avatar {
	margin-top: 5px;
	float: left;
	border: 1px #00366C solid;
}

<section id="news">
<h1>News</h1>

<a href=""><img class="avatar" src="images/noavatar.gif" width="33" height="33">Review update #126,251,754</a><br>
<p>You should know the drill by now.</p>
<br><br><br>
<a href=""><img class="avatar" src="images/bumblebee_man.gif" width="33" height="33">I'm alive.</a><br>
<p>And angry.</p>
<br><br><br>
<a href=""><img class="avatar" src="images/noavatar.gif" width="33" height="33">Well now, what do we have here?</a><br>
<p>I do believe that it's a review update.....</p>
<br><br><br>
<a href=""><img class="avatar" src="images/bumblebee_man.gif" width="33" height="33">I blame society.</a><br>
<p>Games! Games? Games?</p>
<br><br><br>
<a href=""><img class="avatar" src="images/bumblebee_man.gif" width="33" height="33">Fade may have lied.</a><br>
<p>Have I?</p>
<br><br><br>
<a href=""><img class="avatar" src="images/bartavvy.gif" width="33" height="33">THE GAME DROUGHT IS OVER!</a><br>
<p>Click here for lots of exciting new games!</p>
<br><br><br>

</section>

Answer 1

#news {
    float: right;
    width: 45%;
}

#news h1 {
    font-weight: bold;
    background-color: #828CAA;
    font-size: 13px;
    padding: 5px 5px 0;
    color: #FFFFFF;
    padding-bottom: 5px;
}

#news a {
    color: #00366C;
    margin-top: 3px;
    padding-left: 5px;
    font-weight: bold;
}

#news p {
    padding-left: 5px;
    display: inline;
}

#news .avatar {
  vertical-align: top;
    margin: 0;
    float: left;
    border: 1px #00366C solid;
}

Answer 2

将标题文字放在范围内，并在顶部添加填充。

<a href=""><img class="avatar" src="images/noavatar.gif" width="33" height="33"><span class="heading-spacer">Review update #126,251,754</span></a><br>
<p>You should know the drill by now.</p>

和css：

.heading-spacer {
   display:inline-block;
   padding-top:10px;
}

看看是否有类似的东西

这里是一个codepen http://codepen.io/anon/pen/zrgRNp