从 HTML 中的图块重新创建图像答案

【问题标题】：Recreate an image from tiles in HTML从 HTML 中的图块重新创建图像
【发布时间】：2014-12-31 18:54:00
【问题描述】：

我使用类似于“Cut an Image into 9 pieces C#”的内容将图像分成 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。

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

【问题讨论】：

可能应该使用 CSS 而不是表格，但您可以通过将 cellpadding="0" 添加到 table 标记来解决您的问题（this question 的一些较新的答案暗示了这一点）跨度>
我添加了它，仍然看到空间...<body> <table border="0" cellpadding="0"> <tr class="row">
在 CSS 中会是什么样子？我的行和列大小可能会根据显示的图像而改变。
尝试使用下面的pbaldauf's answer 或one of these answers 更新您的CSS。

标签： html css

【解决方案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。

如果这也没有帮助，请使用 开发者工具检查您的 tiles 以查看应用了哪些样式。

【讨论】：

我尝试了!important 标志，但它仍然没有删除行之间的空间。在使用评论部分中的一个链接后，我提出了答案。 +1 向我展示了!important 标志

【解决方案2】：

我首先在 CSS 中添加了 margin: 0 和 padding: 0 ，但它不起作用。然后我尝试了@admedrew 提供的链接 How to remove unwanted space between rows and columns in table?

在 CSS 中添加以下内容：

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

 td img {
    display:block;
}

【讨论】：

它说我可以在两天内完成。感谢 pbaldauf、admdrew 和 myfunkyside 上发布的所有内容，感谢您对此提供的帮助。这对我来说是新的，我非常感谢您的意见。