Toggle Squaresのページでは、JavaScriptで生成されたすべてのセルに< img/>のテーブルがあります。次のCSSを適用しました：CSSの問題：<table>の画像を垂直にタッチする方法は？
.game, .game td, .game tr, .game img
{
border: none;
border-spacing: 0;
padding: 0;
margin: 0;
}
すべてのスペーシングを削除します。しかし、今では、2つの隣接する行の間に間隔の薄い背景線が表示されています。どうすればそれを排除できますか？
ページは有効なXHTML + CSSです。
ありがとうございました。
よろしく、
.game td img {
display: block;
}
画像には独自の空白が付きます
= "0" とCELLSPACING = "0" がテーブルに属性、または
border-collapse属性とborder-width属性をCSSに追加しましたが、それでも機能しません。 （Firefox 3.0.x）。 –
cellpaddingとcellspacingの属性はどうですか？ –
が固定.. CSSで
border-collapse: collapse;
border-width: 0;
を使用しようとCELLPADDINGを追加します。
.game, .game td, .game tr, .game img
{
border: none;
border-spacing: 0;
padding: 0;
margin: 0;
vertical-align: middle;
}
これは私にとって正しいと思われる – Brabster
I次のコードを探している効果を得ることができた：
<html>
<head>
<style>
td { margin 0px; padding: 0px;}
table { border-collapse:collapse;}
</style>
</head>
<body>
<table>
<thead />
<tbody>
<tr><td><img src="test.jpeg" /></td><td><img src="test.jpeg" /></td></tr>
<tr><td><img src="test.jpeg" /></td><td><img src="test.jpeg" /></td></tr>
</tbody>
</table>
</body>
：
コードを挟んスペースのない四角形を形成右隣同士に4枚の固体色のJPEGファイルを示しています問題は：インラインイメージは、イメージのascent = heightとfontのdescent = descentの文字として扱われます。つまり、画像のみを含む表のセルの高さは、画像の高さよりも大きくなります。
これを修正する最も簡単な方法は、テーブル全体の行の高さを0に設定して、テキスト行の下降を抑制する、またはすべてのイメージのdisplay：blockを設定して、インライン形式のコンテキストからブロックの書式のコンテキスト。
ありがとう！それがトリックでした。 –