How do I remove the vertical padding in a div table-cell?

Question

Take this web example into account (it seems to have the same issue) I have the following CSS on my website (note the space between the #head and #body <div>'s ):

#body {
        display: table;
        border-spacing: 0;
        border-collapse: collapse;
}

#body-row {
        display: table-row;
        margin: 0;
        padding: 0;
}

.column-left, .column, .column-right {
        display: table-cell;
        padding: 0px;
        border: dotted 2px #89E;
}

.column-left, .column-right {
        width: 190px;
        font-size: .95em;
}

However, this still adds a space between the very top and bottom of the table-cell. Padding and margin do no seem to do anything for this. Advice?

Answer 1

.column-left, .column, .column-right {
    vertical-align: top; /* add vertical align top to fix this issue */
    display: table-cell;
    padding: 0px;
    border: dotted 2px #89E;
}