CSS表格佈局在單元格之間有很大的空間

Question

我正在寫一個網站，當時有一個包含標誌和標語的標題。該圖像是固定的寬度，和我想的標語爲佔用所有的空間旁邊的圖像並與圖像垂直對齊，所以我用下面的代碼：

<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/

Answer 1

試試這個：

CSS

#tagline { 
    display:table-cell; 
    vertical-align: middle; 
    width:100%; // set width to 100% 
    background-color: #CFE0D6; 

} 

Demo