如何解决HTML中图像之间的空白问题？

我想创建一个带有多个超链接的图像并通过电子邮件发送给某人。

我做什么

我用Photoshop的切片方法和添加URL到切片。我保存了网络的组成。为了让它在我的接收者端工作，我将每个切片上传到在线照片托管网站，并将img src =“本地照片位置”的HTML标签编辑为img src =“在线照片位置”。但问题是我得到每个切片之间的多个白色空间，这会扭曲整个图像。

代码

<html> 
 
    <head> 
 
    <title>General Infosheet July 25</title> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
    </head> 
 
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 
 
    <!-- Save for Web Slices (General Infosheet July 25.jpg) --> 
 
    <table id="Table_01" width="800" height="1034" border="0" cellpadding="0" cellspacing="0"> 
 
     <tr> 
 
      <td> 
 
       <a href="http://facebook.com/"> 
 
        <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_01_zpsgxd25oae.jpg" width="539" height="158" border="0" alt=""></a></td> 
 
      <td rowspan="2"> 
 
       <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/StackOverflow-Version_02_zpsmqhre1ll.jpg" width="260" height="452" alt=""></td> 
 
      <td> 
 
       <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="158" alt=""></td> 
 
     </tr> 
 
     <tr> 
 
      <td rowspan="4"> 
 
       <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/StackOverflow-Version_03_zpsnfkulzvt.jpg" width="539" height="876" alt=""></td> 
 
      <td> 
 
       <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="294" alt=""></td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <a href="http://twitter.com/"> 
 
        <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_04_zps239b1stn.jpg" width="260" height="144" border="0" alt=""></a></td> 
 
      <td> 
 
       <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="144" alt=""></td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <a href="http://instagram.com/"> 
 
        <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_05_zpsuwqhoawm.jpg" width="260" height="134" border="0" alt=""></a></td> 
 
      <td> 
 
       <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="134" alt=""></td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <a href="http://photobucket.com/"> 
 
        <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_06_zpsiwxkb9ty.jpg" width="260" height="304" border="0" alt=""></a></td> 
 
      <td> 
 
       <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="304" alt=""></td> 
 
     </tr> 
 
    </table> 
 
    <!-- End Save for Web Slices --> 
 
    </body> 
 
    </html>

问题

我想删除的图像之间的空白。请提供代码编辑，以帮助删除这些空白区域。

来源

2016-07-28 Shrijan Aryal

把代码扔出去。白手起家。不要使用表格进行布局。这不是1997年。现在，Web浏览器很好地支持CSS。也不要写无效的HTML：http://validator.w3.org/nu/ – Quentin

图像包含空白 –

@Quentin：问题提到电子邮件，而不是网页浏览器。标签应该是固定的。 –

回答

我能够通过检查电子邮件的正文部分的Hotmail，然后在检查整个粘贴HTML代码来解决这个问题。这样，代码不是由Outlook解释，而是由Web浏览器引擎解释。因此，这可能是任何尝试向复杂HTML代码发送电子邮件的人的坚定解决方案。

来源

2016-08-02 19:13:09

你可以接受你自己的答案，注意这个问题有一个解决方案.... –

确保每个单元格填充为0像素，然后将border-spacing属性设置为0，border-collapse属性collapse。表默认情况下有间距，导致空白。

来源

2016-07-28 14:09:29

如何解决HTML中图像之间的空白问题？

回答

相关问题