HTML / CSS – Misterioso relleno superior que no desaparece

Estoy haciendo un diseño de columna con CSS, y viene muy bien. Sorprendentemente, mi pregunta no es sobre cómo hacer que las columnas funcionen; Eso está funcionando. Pero en lugar de eso, estoy obteniendo un misterioso “relleno” en la parte superior de mis columnas que está presionando el contenido. He preparado un ejemplo aquí:

jsFiddle

menu items

Not at the Top!

Y aquí está el CSS relevante:

 #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; } 

Realmente no estoy seguro de lo que lo está causando. La segunda columna simplemente se empuja hacia abajo un poco, y luego la tercera también se empuja hacia abajo, independientemente de las reglas que especifique.

Dado que #right es un elemento de table-cell , podría agregar vertical-align:top para resolver esto. Para lo que vale, esto no fue relleno, es solo la forma en que se representan estos elementos, ya que el comportamiento predeterminado es alinearlos con la baseline valores predeterminada.

EJEMPLO ACTUALIZADO AQUÍ

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