表格获得 1px 的不需要的填充答案

【问题标题】：Table's Getting 1px of Unwanted Padding表格获得 1px 的不需要的填充
【发布时间】：2017-09-12 04:53:57
【问题描述】：

由于某种原因，我在桌子上得到了 1 像素的填充或边框。我不知道如何摆脱它。我尝试将display:block;margin:0;padding:0; 添加到图像中，但这并不能解决问题。我还在 CSS 中尝试过 <table border="0"> 和 border:none;。对于我的生活，我无法弄清楚这一点。

这是一个问题的原因是因为我试图让图像与 tr 两侧的边缘对齐，给它圆形边框，因为 CSS3 边框半径在 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>

【问题讨论】：

您是否尝试过使用无表布局？表格布局不受欢迎（从这里开始争论）。
为什么不在 CSS 中为表格重置边距/填充？
Blender 再也没有人争论了。
你需要关闭第一个<td>和你的<tr>
@Blender，我知道，但这实际上是表格有用的情况。在我看来，这种结构化的方式有助于在 CMS 中列出项目。在大多数情况下，表格非常烦人。

标签： html css html-table margin padding

【解决方案1】：

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

【讨论】：

啊！非常感谢！我以为我的 CSS 重置可以解决这个问题，但它马上就解决了！
此选项在 HTML5 中已弃用，但幸运的是您可以在 CSS 中做同样的事情：stackoverflow.com/questions/339923/…

【解决方案2】：

这似乎为我解决了问题。

CSS：

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

【讨论】：

【解决方案3】：

我的问题是一些奇怪的行为，我已经尝试了书中的所有技巧，但是 padding 是顽固的。最后我发现，为 body 元素设置的 line-height 属性正在创建padding-top 的效果。在使用本地化规则覆盖

之后

line-height: normal;

...问题解决了。

【讨论】：