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

Question

具有边框的表格单元格元素不考虑包含它们的单元格的垂直高度。 child 的边界可能会与包含它的单元格的填充(甚至边界)重叠。如何防止这种情况发生，使单元格完全包含子元素，包括其边框？

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

在 span 上粘贴 display: inline-block;。然后边框将是 block 边框而不是线框边框，并被迫留在元素的边界框内。

类似的东西。 :)