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

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

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

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

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