Html 表格单元格底部的空白/填充

看看这个JSFIDLE：

HTML:

---

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

删除div的

显示内联样式

这是因为
display:inline block
在div周围留下了空白，您应该去掉该属性，从
div
中删除
display
属性将精确设置您想要的输出


尽管
内联块
仍然非常有用，但是开发人员知道如何处理使用它所带来的空间是很重要的

旁注：当项目显示为
inline block
时，标记中的任何回车符或制表符都会被识别为空白字符。在这种情况下，您可以通过在项目之间没有空格的情况下编写标记来解决此问题：
要离开该空格，您可以更改默认为基线的
的
垂直对齐

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

演示
虽然这不是您要解决的问题，但这里有一个类似问题的解决方案：

在IE11中，当您设置
td>div{height:100%；min height:240px}时，表底部的单元格中也会出现白色gab。相反，您必须设置
td>div{height:240px}`
，即使每个答案都能解决问题，但这一个最适合我。我仍然需要display:inline块，因为我需要几个div相邻排列。不幸的是，我的问题中没有描述这一点。可能可以通过并排浮动它们来解决问题，但使用“垂直对齐”的此选项实际上可以解决问题。
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 {
 display:inline-block;
 vertical-align:top; /*or middle or bottom*/
}