如何停止表格單元格邊框與單元格的填充區域重疊？

Question

具有邊框的表單元素不考慮包含它們的單元格的垂直高度。小孩的邊界與我們的包含細胞的填充物（甚至是邊界）重疊。如何防止這樣的細胞完全包含子元素，包括其邊界？

JSFiddle Example

<table> 
    <tr> 
     <td> 
      <span>foo bar</span> 
     </td> 
    </tr> 
</table> 

tr { 
    background: red; 
} 
td { 
    padding: 5px; 
    background: white content-box; 
} 
span { 
    border: 10px solid blue; 
} 

Answer 1

上跨度棒display: inline-block;。邊界將是一個塊邊界而不是一個線框邊界，並被強制保留在元素的邊界框內。

就是這樣的。 :)