HTML/CSS - 神祕的頂部填充不會消失

Question

我正在用CSS製作一個列布局，並且它正在順流而下。令人驚訝的是，我的問題不在於如何使這些柱子工作。這是運作。但是我反而在我的專欄的頂部收到一個令人毛骨悚然的神祕「填充」，這是推低內容。我已經在這裏準備一個例子：

jsFiddle

<div id="top"></div> 
<div id="main"> 
    <div id="left"> 
     <div>menu items</div> 
    </div> 
    <div id="center"> 
     <h3>Not at the Top!</h3> 

    </div> 
    <div id="right"> 
     <header>Right Top</header> 
     <article>Right Body</article> 
    </div> 
</div> 

，這裏是相關的CSS：

#top { 
    background-color: #25282b; 
    height: 64px; 
} 
#main { 
    width: 100%; 
    display: table; 
} 
#left, #center, #right { 
    display: table-cell; 
    margin: 0px; 
} 
#left { 
    width: 150px; 
    background-color: rgba(38, 46, 51, 1); 
    color: #7d8285; 
} 
#left div:first-child { 
    padding-top: 10px; 
} 
#center { 
    width: 228px; 
    background-color: rgba(57, 65, 71, 1); 
    color: #999ea1; 
} 
#center div:first-child { 
    padding: 15px; 
} 
#center div:first-child h3 { 
    color: #fff; 
    margin-bottom: 2px; 
} 
#right { 
    background-color: rgba(255, 255, 255, 1); 
} 
#right header { 
    background-color: #3e7aa5; 
    height: 92px; 
} 
#right article { 
    padding: 10px; 
    background-color: #fff; 
} 

我真的不能確定是什麼原因造成的。不管我指定的規則如何，第二列只是被徹底推低一點，然後第三列也被推下來。

Answer 1

鑑於#right是一個table-cell元素，您可以添加vertical-align:top來解決這個問題。對於它的價值，這不是填充，它只是這些元素呈現的方式，因爲默認行爲是對齊到默認值baseline。

UPDATED EXAMPLE HERE

#right { 
    background-color: rgba(255, 255, 255, 1); 
    vertical-align: top; 
}