表格出现1像素的不必要填充

Question

由于某种原因，我的表格出现了1像素的填充或边框。我无法摆脱它。我尝试给图片添加display:block;margin:0;padding:0;，但没有解决问题。我在CSS中也尝试了<table border="0">和border:none;。我真的想不出来了。

这是个问题，因为我想让图像与TR两侧的边缘对齐，以给它圆角边框，因为CSS3的border-radius不能用于TR。我在CSS中添加了table, table * {border:1px solid red;}，从那里看起来，这肯定是一个填充或边距问题。

问题出在这张图片上：

在左侧和右侧，您可以看到图像与表格边缘之间有某种填充或其他东西。红色边框只是为了查看此内容。

这是我的CSS：

table a {
    color: #f7941E;
    font-family: Arial;
    font-size: 16px;
    font-weight: bold;
    /* css3 */
    transition: color .25s;
    -khtml-transition: color .25s;
    -moz-transition: color .25s;
    -o-transition: color .25s;
    -webkit-transition: color .25s;
}

    table a:hover {
        color: #f8ae57;
    }

table {
    width: 610px;
}

    table tr {
        height: 33px;
        padding: 0;
        margin: 0;
        vertical-align: middle;
    }

        table td {
            border-collapse: collapse;
        }

    table tr.head {
        color: #58585a;
        font-family: Rockwell, serif;
        font-size: 18px;
        font-weight: bold;
        text-transform: lowercase;
    }

    table tr.even {
        background: #EEE;
        height: 33px;
    }

        table tr td img {
            padding: 0 15px 0 13px;
            vertical-align: middle;
        }

            table tr td a img {
                opacity: .6;                
                /* css3 */
                transition: opacity .25s;
                -khtml-transition: opacity .25s;
                -moz-transition: opacity .25s;
                -o-transition: opacity .25s;
                -webkit-transition: opacity .25s;
            }

                table tr td a img:hover {
                    opacity: 1;
                }

而且HTML：

<table border="0">
    <tr>
        <td><img src="images/tr-left.png" style="display:block;margin:0;padding:0;">
        <td><img src="images/some-icon.png" /> <a href="#">Some Content</a></td>
        <td><img src="images/tr-right.png" style="display:block;margin:0;padding:0;">
    </td>
</table>

- JacobTheDev

---

你尝试过使用无表格布局吗？表格布局被认为是不好的（在此开始争论）。 - Blender

为什么不在CSS中重置表格的margin/padding？ - Nightfirecat

没有人再怀疑Blender了。 - Phil

你需要关闭第一个<td>和你的<tr>。 - Jared

@Blender，我知道这一点，但实际上这是一个表格非常有用的情况。以它们的结构方式来看，在我的观点中，表格是在内容管理系统中列出项目的一种方式。在大多数情况下，表格都非常令人讨厌。 - JacobTheDev

Answer 1

尝试： <table border="0" cellpadding="0" cellspacing="0">

- prodigitalson

---

啊！非常感谢！我以为我的CSS重置已经解决了这个问题，但是你的方法完美地解决了它！ - JacobTheDev

这个选项在HTML5中已经被弃用，但是幸运的是你可以在CSS中做同样的事情：https://dev59.com/FnRC5IYBdhLWcg3wUfN2 - Alex Ryan

Answer 2

这对我似乎解决了问题。

CSS：

table {
    width: 610px;
    border-spacing:0; /* Add this here */
}

- BCDeWitt

Answer 3

我的问题是一些奇怪的行为，我已经尝试了书中所有的技巧，但那个填充很顽固。最后我发现，设置在元素上的line-height属性，产生了padding-top的效果。在用本地规则覆盖它之后，问题得到了解决。

覆盖方法如下：line-height: normal;

- Mohd Abdul Mujib