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

【问题标题】：White margin/padding at the bottom of table cell表格单元格底部的白色边距/填充
【发布时间】：2014-01-17 13:01:58
【问题描述】：

看看这个 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 的橙色背景色填充整个表格单元格。

【问题讨论】：

标签： html css padding css-tables cellpadding

【解决方案1】：

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

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

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

【讨论】：

尽管每个答案都能解决问题，但这个最适合我。我仍然需要 display:inline-block 因为我需要几个 div 并排排列。不幸的是，我的问题中没有描述这一点。可能可以通过将它们并排浮动来解决，但这个带有垂直对齐的选项实际上可以解决它。

【解决方案2】：

这是因为display:inline-block 在 div 周围留有空白，您应该删除该属性，从 div 中删除 display 属性将设置您想要的输出。

Fiddle Demo

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

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

【讨论】：

【解决方案3】：

去掉div的display-inline样式

fiddle

【讨论】：

【解决方案4】：

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

当您设置 td > div {height: 100%; min-height: 240px}. Instead you must settd > div {height: 240px}`时，您还会在 IE11 的表格单元格底部看到白色间隙

【讨论】：