Question

看看这个JSFiddle：http://jsfiddle.net/nMbb4/1/

HTML：

<table>
    <tr>
        <td>
            1
        </td>
    </tr>
    <tr>
        <td>
            <div></div>
        </td>
    </tr>
</table>

CSS：

table, tr, td
{
    padding:0px;
    margin:0px;
    border:solid 1px black;
    font-size:10px;
}
table
{
    border-collapse:collapse;
}

td
{
    width:15px;
}

div
{
    width:15px;
    height:15px;
    display:inline-block;
    background-color:orange;
}

为什么表格单元底部是白边/填充？我怎么能摆脱它？这里的目标是使div的橙色背景颜色填充整个表格单元格。

Answer 1

这是因为display:inline-block在div周围留下了空格，你应该摆脱那个属性，从display删除div属性会设置你想要的输出。

Fiddle Demo

尽管inline-block仍然非常有用，但开发人员知道如何处理使用它所带来的空间非常重要。

旁注：当项目显示为inline-block时，任何回车符或标记中的选项卡都会被识别为空格字符。在这种情况下，您可以通过编写标记来解决此问题：项目之间没有空格：

Answer 2

要离开该空间，您可以更改vertical-align的{{1}}，默认为基线`

<div>

演示http://jsfiddle.net/nMbb4/6/

Answer 3

删除div的display-inline样式

fiddle

Answer 4

虽然这不是您遇到的问题，但这是对类似问题的解决方法：

当您设置td > div {height: 100%; min-height: 240px}. Instead you must set td＆gt;时，IE11中的表格单元底部也会出现白色斑点。 div {height：240px}`

表格单元格底部的白边/填充

4 个答案: