CSS div box moves down a bit when text is put in

Question

These are the css codes of my div, I'm making a slothead class div first and horizontally few slots.

div.slotshead{
    z-index:3;
    position:relative;
    border: 1px solid #5f92d2;
    width: 130px;
    height: 50px;
    color: #003366;
    font-size:15px;
    text-align:center;
    font-family:'arial';
}

div.slots{
    z-index:3;
    position:relative;
    border: 1px solid #d0d0fe;
    width: 45px;
    height: 50px;
    color: #003366;
    font-size:10px;
    text-align:center;
    font-family:'arial';
}

This is the code in them

echo '<h3>';
for ($i = 0; $i < 31; $i++) {
    echo "<div class=slotshead id=$i>";
    If($i==0){
        echo 'TIME';
    }
    echo "</div>";

    for ($j=0;$j < 23;$j++) {
        echo " <div class=slots>";
        If(($i==0)){
            $start = strtotime('8am');
            $k++;
            $tod = $start + ($k * 15 * 60);
            echo date('H:i A', $tod);
        }
        echo "</div>";
    }

    echo '<br>';

}
echo '</h3>';

here is the example jsfiddle

Here, The slots works fine but slothead(div with 'TIME') moves a bit down, why is that? FYI, I tried vertical-align=top; But of no use...

Answer 1

Ok I feel this is what you are asking

in css add

h3{margin:0;padding:0;}

example

DEMO

Still you want to reduce mean see the following

html,body,h3{margin:0;padding:0}

DEMO