html - CSS テーブル レイアウトのセル間に大きなスペースがある

Question

現在、ロゴとキャッチフレーズを含むヘッダーを持つ Web サイトを作成しています。画像は固定幅で、タグラインが画像の横のすべてのスペースを占有し、画像と垂直方向に整列するようにするため、次のコードを使用しています。

<div id="header">
    <img id="logo" src="images/logo.png"/>
    <div id="tagline">
        <p>Tagline text</p>
    </div>
</div>

css ではdisplay: table、ヘッダーとdisplay: table-cell画像とタグライン div に使用しています。画像とキャッチフレーズの間に大きなギャップがあることを除いて、これは私が望むものをほぼ達成します. ヘッダーに次のプロパティを設定しようとしましたが、ギャップを取り除くことができません。ブラウザの幅が狭くなるにつれて隙間が小さくなって消えていくので、何らかのセル間隔だと思います。スペースを埋めるキャッチフレーズを取得するにはどうすればよいですか?

#header {   
    display: table;
    width: 100%;
    margin: 0;
    border: 0;
    padding: 0;
    border-collapse: collapse;
    border-spacing: 0;
}

より完全な例については、http://jsfiddle.net/5LJNw/3/を参照してください。