Question

我有一张表，我已将按钮插入到单元格中。但是，尽我所能，我无法摆脱单元格顶部和按钮之间出现的一些空白。

这是Jsfiddle的一个例子： http://jsfiddle.net/7Bz36/1/

我有一个带按钮的简单表格

<table border="1">
    <tr>
        <td>
             <button id="1"></button>
        </td>
    </tr>
</table>

有一些css并试图摆脱它：

button {
    height: 15px;
    width: 15px;
    border-radius: 0px;
    margin: 0px;
    white-space: none;
}
table {
    border-collapse: collapse;
}
tr td {
    height: 15px;
    padding: 0px;

任何人都可以弄清楚如何摆脱它吗？谢谢！

Answer 1

您没有使用该按钮的任何文字值，请使用font-size: 0;或line-height: 0;

Demo（字体大小0）

Demo 2（线高0）

同样id="1"无效，无法使用int

启动id名称

Answer 2

试试这个：

button {
    height: 15px;
    width: 15px;
    border-radius: 0px;
    display: block;
}

table, td, button {
    margin: 0px;
    padding: 0px;    
}

这会将所有涉及的元素margins和paddings设置为0px;，并将button元素设置为display: block;以摆脱一些内联元素白空间。

jsFiddle

Answer 3

目前尚不清楚问题是通过你的jsfiddle。

此外，none不是CSS中white-space的有效属性。你知道你在做什么，或者你只是添加随机样式，希望它能起作用吗？

无论如何，你的代码格式不正确，CSS以</table>结尾，什么？此外，你的html在这里也没有正确构建，也没有在jsfiddle中构建。

似乎你根本没有对这个问题进行过多的研究，而是尝试了随机性和SO。

我很乐意帮助你，但我看不出问题所在。这里没有很好地解释它并没有在jsfiddle中显示。

奇怪的空白无法摆脱HTML / CSS

3 个答案: