如何阻止表格单元格边框与单元格填充区域重叠？

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;跨度。然后边框将是一个块边框而不是一个线框边框，并被强制保留在元素的边界框内。

这样的事情。 ：）