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

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

要离开该空间，您可以更改默认为基线的<div> vertical-align"

div {
 display:inline-block;
 vertical-align:top; /*or middle or bottom*/
}

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

Answer 2

这是因为display:inline-blockdivs周围留下了空白，您应该摆脱该属性，从div中删除display属性将精确设置您想要的输出。

小提琴演示

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

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

Answer 3

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

在IE11中，当您将td 设置为>div {height： 240px}时td > div {height: 100%; min-height: 240px}. Instead you must set表格单元格底部也会得到白色gab