Question

在Toggle Squares页面中，我有一个由＆lt; img /＆gt;组成的表格。在JavaScript生成的每个单元格中。我应用了以下CSS：

.game, .game td, .game tr, .game img
{ 
  border: none;
  border-spacing: 0;
  padding: 0;
  margin: 0;
}

为了消除所有间距。但是，现在我在两个相邻行之间得到一条很细的背景线。我怎样才能消除它？

该页面是有效的XHTML + CSS。

感谢您的帮助。

此致

Shlomi Fish

Answer 1

将cellpadding =“0”和cellspacing =“0”属性添加到表中，或尝试使用

border-collapse: collapse; 
border-width: 0;

在css ..

Answer 2

.game td img {
 display: block;
}

图像带有自己的空白区域

Answer 3

修正：

.game, .game td, .game tr, .game img
{ 
  border: none;
  border-spacing: 0;
  padding: 0;
  margin: 0;
  vertical-align: middle;
}

Answer 4

问题是：内嵌图像被视为带有ascent =图像高度和下降=字体下降的字母。这意味着仅包含图像的表格单元格的高度大于图像高度。

解决这个问题的最简单方法是将整个表的行高设置为零，从而抑制文本行中的下降或为所有图像设置display：block，从而将它们从内联格式化上下文移动到块格式化上下文中。

Answer 5

我可以使用以下代码获得您正在寻找的效果：

代码描绘了四个纯色jpegs，彼此相邻，形成一个正方形，中间没有空格：

<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>

CSS问题：如何使图像组成的图像垂直接触？<table> </table>

5 个答案: