html - 在不增加额外空间的情况下用图像填充表格

Question

我需要构建一个 2x2 表，其中每个单元格仅包含一个图像（20x20 大小）而没有任何额外空间。

我试图强制图像和表格单元格的大小，但生成的表格仍然有额外的空格。我错过了什么？

http://jsfiddle.net/casaschi/M74nN/

HTML

<table id="myTable" cellspacing="0" cellpadding="0" border="0">
    <tr>
       <td>
            <img src="http://pgn4web.casaschi.net/images/alpha/20/bp.png" />
       </td>
        <td>
            <img src="http://pgn4web.casaschi.net/images/alpha/20/bp.png" />
        </td>
    </tr>
    <tr>
        <td>
            <img src="http://pgn4web.casaschi.net/images/alpha/20/bp.png" />
        </td>
        <td>
           <img src="http://pgn4web.casaschi.net/images/alpha/20/bp.png" />
        </td>
    </tr>
</table>
<div id="out"></div>

CSS

table {
    width: 40px;
    height: 40px;
    border: none;
    border-collapse: collapse;
    border-spacing: 0px;
    margin: 0;
    padding: 0;
}
td, img {
    border: none;
    margin: 0;
    padding: 0;
    width: 20px;
    height: 20px;
}

JS

document.getElementById("out").innerHTML = document.getElementById("myTable").offsetWidth + "x" + document.getElementById("myTable").offsetHeight;

Answer 1

应用display: block到您的<img>标签解决了这个问题。图像是inline-block默认的，所以我猜测它们周围的额外空白会导致额外的间距。

Answer 2

添加font-size:0到td. 间距是由默认为 16px 字体大小的图像周围的空白引起的。

小提琴 - http://jsfiddle.net/Xgwka/

Answer 3

Use negative value of margin for td

td, img {
border: none;
margin: -5px;
padding: 0;
width: 20px;
height: 20px;

}

Answer 4

最简单的解决方案是添加font-size:0到您的 td 规则：

td, img {
    border: none;
    margin: 0;
    padding: 0;
    width: 20px;
    height: 20px;
    font-size:0;
}

jsFiddle 示例

您还可以：

• 浮动左边的图像img {float:left;}