当文本被放入时，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