图像分割成表：行

也许解决方法很简单，但我没有发现任何回答我的问题之间删除空间...图像分割成表：行

我想要的图像分割成几个，所以我可以CLIC它或将其悬停，并在看起来像是单个图像的情况下创建很酷的互动。问题是，我的图像在表格的行之间有一个不需要的空间。

因此，这里正是我的意思做的事：

<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，该死的空间仍然是在这里 - 或者我做错了。任何想法如何我可以摆脱它？

来源

2016-07-08 GaletteRaclette

的可能的复制[如何删除行之间不必要的空间，表中的列？]（http://stackoverflow.com/questions/2279 396 /如何删除不需要的空间之间的行和列在表中） – DavidDomain

你可以通过改变img的布局解决它block：

td img{display:block}

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

来源

2016-07-08 13:34:18 potashin

感谢您的回答。我在我的网站上试过了，但看起来我的问题最终并不那么简单。 WordPress的主题包括已经这么多的CSS，它并没有帮助...：S 这里是我试图（和挣扎）设置这个链接： http://cuisines-et-bains.com /脚本测试/ 任何想法我应该做什么？ – GaletteRaclette

@GaletteRaclette：你可以使用'！important'来重写wordpress的风格。 – potashin

噢，是的！这工作:) 所以我只是将这行添加到我的CSS： td img { \t display：block！important; } 非常感谢。 – GaletteRaclette

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

table { 
 
    font-size: 0; 
 
}

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

来源

2016-07-08 13:34:08 makshh

图像分割成表：行

回答

相关问题