記事のサムネイル付き横並びリストのul上が一段空いてしまいます

記事を横並びのサムネイル付きリストとして呼び出しています。

全体の幅は980pxで、150pxのサムネイルが6枚に、liの右マージンが16pxでちょうど980pxに配置しています。（ulの右マージンは-16pxにしています）
呼び出しを6記事（以下）にして1行に収まるようにすると、なぜかulの上に20pxほど空いてしまいます。
7記事以上呼び出して2行に渡るようにすると、ulの上の20pxはなくなります。

cssで指定しているマージンはh1下に20pxのみで、ulの上は0pxです。
にもかかわらず、h1とulの間は、指定しているh1下の20pxのマージン＋謎の20pxほど空いてしまいます。

該当ページはこちらです。
記事呼び出しのソースは以下の通りです。

<br />
<pre><code><h1 class="entry-title">新着レシピ</h1>
<div class="boxline">
<ul class="posts-listing">
<?php $posts = get_posts('numberposts=6&cat=16&order=DESC&orderby=data'); ?>
<?php foreach($posts as $post): ?>
	<li>
	<a href="<?php the_permalink() ?>">
		<?php the_post_thumbnail( 'thumb230' ); ?>
		<span><?php the_title(); ?></span>
	</a>
	</li>
<?php endforeach; ?>
</ul>
</div>

また、別のページで、あるカテゴリに属する記事一覧を同じようにサムネイル付きリストとして呼び出していますが、こちらも同じように6記事以下の1行だと、ulの上が20pxほど空いてしまいます。
スタイルは上述のページとまったく同じです。

参考ページはこちらです。
記事一覧呼び出しのソースは以下の通りです。

<br />
<pre><code><div class="boxline">
<ul class="posts-listing">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	<li>
	<a href="<?php the_permalink() ?>">
		<?php the_post_thumbnail( 'thumb230' ); ?>
		<span><?php the_title(); ?></span>
	</a>
	</li>
<?php endwhile; else: ?>
</ul>
<p>記事がありません</p>
<?php endif; ?>
</div>

記事が2行以上あり、ul上になぞのスペースがないページがこちらです。

記事が1行のとき、ul上に20pxほど空いてしまうのをなくしたいのですが、原因がまったく分かりません。
ulの上にネガティブマージンを指定すると、記事が1行のときと2行以上のときでスタイルが変わってしまうので利用できません。

大変お手数をお掛け致しますが、お分かりになる方、お知恵を貸して頂きたく存じます。
よろしくお願い致します。