CSS：爲什麼td和div之間出現間隙？

Question

在我製作的表格中，每當單元格只有一點內容時，td和div之間就會出現間隙 - 但看起來很正常，但內部有很多東西。這看起來很奇怪。有人可以幫我刪除它嗎？

HTML：

<td cod='[@cod]'> 
<div class="headler"> 
    [@inicio] - [@fim] 
</div> 
<div class="valores_resultados"> 

    <div class="disciplina" cod="[@cod_disciplina]"> 
     [@disciplina] 
    </div> 
    <br> 
    <div class="professor" cod="[@cod_prof]"> 
     [@professor] 
    </div> 
</div> 

CSS：

table { 
    border-spacing: 10px;; 
    border-collapse: separate; 
    width: 100%; 
} 

tr, td, th { 
    border: #000 solid 1px; 
    -webkit-box-shadow: 3px 2px 0px 0px rgba(0, 0, 0, 0.45); 
    -moz-box-shadow: 3px 2px 0px 0px rgba(0, 0, 0, 0.45); 
    box-shadow:   3px 2px 0px 0px rgba(0, 0, 0, 0.45); 

} 

td:hover { 
    border: rgb(80, 0, 0) solid 1px; 
    cursor:pointer; 
    -webkit-box-shadow: 3px 2px 0px 0px rgba(80, 0, 0, 0.45); 
    -moz-box-shadow: 3px 2px 0px 0px rgba(80, 0, 0, 0.45); 
    box-shadow:   3px 2px 0px 0px rgba(80, 0, 0, 0.45); 
} 

.headler { 
    background-color: rgb(145, 0, 0); 
    text-align: center; 
    padding: 4% 0%; 
    margin: 0; 
} 

.valores_resultados{ 
    min-height: 60px; 
    text-align: center; 
} 

.disciplina { 
    margin-top: 3%; 
} 

.professor { 
    margin-bottom: 4%; 
}