Question

也许解决方案很简单，但我找不到任何可以回答我问题的内容......

我想将图像拆分成几个，所以我可以将其删除或悬停，并在看似单个图像的地方创建很酷的交互。问题是，我的图像在表格行之间有一个不受欢迎的空间。

所以这就是我的意思：

<div id="blocfour">
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step2.png" /></td>
        <td><img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step3.png" /></td>
      </tr>
      <tr>
        <td><img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step1.png"/></td>
        <td><img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step4.png" /></td>
      </tr>
    </table>
</div>

我在CSS中试过“崩溃”，还有其他很多东西，但是naaah，该死的空间还在这里 - 或许我做错了。知道如何摆脱它吗？

Answer 1

您可以将img的布局更改为block来修复此问题：

＆＃13;

td img{display:block}

＆＃13;

<div id="blocfour">
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step2.png" /></td>
        <td><img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step3.png" /></td>
      </tr>
      <tr>
        <td><img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step1.png"/></td>
        <td><img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step4.png" /></td>
      </tr>
    </table>
</div>

＆＃13;

Answer 2

如果您在表格中使用文字，则可以为CSS中的表格单元重置font-size。

＆＃13;

table {
  font-size: 0;
}

＆＃13;

<div id="blocfour">
  <table border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td>
        <img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step2.png" />
      </td>
      <td>
        <img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step3.png" />
      </td>
    </tr>
    <tr>
      <td>
        <img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step1.png" />
      </td>
      <td>
        <img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step4.png" />
      </td>
    </tr>
  </table>
</div>

＆＃13;

图像拆分为表格：删除行之间的空格

2 个答案: