html - 余分なスペースを追加せずにテーブルを画像で埋める

Question

各セルに画像 (20x20 サイズ) のみが含まれ、追加のスペースがない 2x2 テーブルを作成する必要があります。

画像と表のセルのサイズを強制しようとしましたが、結果の表にはまだ余分なスペースがあります。私は何が欠けていますか？

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ます。間隔は、デフォルトの 16 ピクセルのフォント サイズを持つ画像の周囲の空白によって発生します。

フィドル - http://jsfiddle.net/Xgwka/

Answer 3

font-size:0最も簡単な解決策は、td ルールに追加することです。

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

jsFiddle の例

次のこともできます。

• 残した画像を浮かせるimg {float:left;}

Answer 4

td のマージンに負の値を使用

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

}