html - 添加链接后表格中的额外空间

Question

不久前，我遇到了一个问题，表格中的图像没有填充单元格，这在 this post 中有所介绍。

但是，我现在对此进行了编辑，我需要添加图像和文本的链接。同样，我遇到了同样的问题，我有多余的空格。

<table>
    <tr>
        <td width="200px" height="175px"  style="text-align: center; border: 0; background-color: #ffffff; padding: 0; margin: 0; border-collapse: collapse; "> 
            <a href="http://www.placekitten.com/"><img src="http://www.placekitten.com/200/175" style="display: block; padding: 0; border: 0;" /></a>
        </td>
    </tr>
    <tr>
        <td width="200px" height="25px"  style="text-align: center; border: 0; background-color: #535152; color: #fffdfe; padding: 0; margin: 0; border-collapse: collapse; ">
            <a href="http://www.placekitten.com/">Text</a>
        </td>
    </tr>
</table>

这是一个JSFiddle

这是在某处填充的情况吗？或者什么？

Answer 1

添加以下 CSS:

Demo Fiddle

table{
    border-collapse:collapse;
}

您还应该将样式从内联移动到样式表中。

More on border-collapse from MDN

The border-collapse CSS property selects a table's border model. This has a big influence on the look and style of the table cells.

The separated model is the traditional HTML table border model. Adjacent cells each have their own distinct borders. The distance between them given by the border-spacing property.

In the collapsed border model, adjacent table cells share borders. In that model, the border-style value of inset behaves like groove, and outset behaves like ridge.