用图像填充表格而不增加额外空间

Question

I need to build a 2x2 table where each cell contains only an image (20x20 size) without any additional space.

I tried to force the size of the image and the table cells, but the resulting table still has extra spaces. What am I missing?

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

Applying display: block to your <img> tags solved the problem. Images are inline-block by default so I'm guessing that the extra whitespace around them caused the additional spacing.

Answer 2

Add font-size:0 to td . The spacing is caused by the whitespace around the images having a default of 16px font size.

Fiddle - http://jsfiddle.net/Xgwka/

Answer 3

Easiest solution is to add font-size:0 to your td rule:

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

jsFiddle example

You could also:

• Float the images left with img {float:left;}

Answer 4

Use negative value of margin for td

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

}