Question

我有一张图像，我使用类似于＆＃34; Cut an Image into 9 pieces C#＆＃34;的东西分成了48个图块（8x6）。我想把这些瓷砖重新放在一起作为html中的原始图像。

这样做的最佳方式是什么？

我的第一个想法是使用一个包含8列和6行的表格，每个单元格中只有一个图块，将所有边框和间距设置为0.我正在使用How to remove unwanted space between rows and columns in table?答案中提供的样式表

不幸的是，我的行之间仍有空格。

这是HTML：

<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Picture this</title>
    <link rel="stylesheet" type="text/css" href="Reset.css" />
</head>
<body>
    <table border="0" cellspacing="0">
        <tr class="row">
            <td><img id="displayimage0" /></td>
            <td><img id="displayimage1" /></td>
            <td><img id="displayimage2" /></td>
            <td><img id="displayimage3" /></td>
            <td><img id="displayimage4" /></td>
            <td><img id="displayimage5" /></td>
            <td><img id="displayimage6" /></td>
            <td><img id="displayimage7" /></td>
        </tr>
        <tr class="row">
            <td><img id="displayimage8" /></td>
            <td><img id="displayimage9" /></td>
            <td><img id="displayimage10" /></td>
            <td><img id="displayimage11" /></td>
            <td><img id="displayimage12" /></td>
            <td><img id="displayimage13" /></td>
            <td><img id="displayimage14" /></td>
            <td><img id="displayimage15" /></td>
        </tr>
    </table>

CSS直接来自link in the accepted answer。

这是输出的屏幕截图（注意行之间的空格......

enter image description here

Answer 1

尝试以下 CSS属性：

table {
    border-spacing: 0 !important; //This should normally do the trick
    margin: 0 !important;
    padding: 0 !important;
    border-collapse: collapse !important;
}

编辑：您可以从文件覆盖部分 CSS属性。因此，请尝试在CSS样式的末尾添加!important。

如果这也没有帮助，请使用开发人员工具检查磁贴以查看应用了哪些样式。

Answer 2

我首先添加了边距：0和填充：0到CSS并且它不起作用。然后我尝试了@admedrew提供的链接 How to remove unwanted space between rows and columns in table?

将以下内容添加到CSS中：

对于符合标准的HTML5，添加所有此css以删除所有空间表格中的图像之间：

 td img {
    display:block;
}

从HTML中的切片重新创建图像

2 个答案: