當文本被放入時，CSS div框向下移動

Question

這些是我的div的CSS代碼，我首先製作了一個插槽類div，並且水平地插入了少量插槽。

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

這是他們

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>'; 

這裏的代碼示例中jsfiddle

這裏，槽工作正常，但slothead（DIV與 '時間'），移動有點消沉 ， 這是爲什麼？ 僅供參考，我試過vertical-align=top;沒有用的，但是......

Answer 1

好吧，我覺得這是你問

在CSS中添加

h3{margin:0;padding:0;} 

例如

DEMO

還是要減少意思，看下面的內容

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

DEMO