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

【问题标题】：How can you stop the borders of table cell elements overlapping the cell's padding area?如何阻止表格单元格元素的边框与单元格的填充区域重叠？
【发布时间】：2013-10-26 23:01:01
【问题描述】：

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

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;
}

【问题讨论】：

标签： html css

【解决方案1】：

在跨度上粘贴display: inline-block;。然后边框将是块边框而不是行框边框，并被强制留在元素的边界框内。

类似的东西。 :)

【讨论】：