为什么我的表格单元格中的元素之间有空格

Question

我是 html 新手，事实上，我今天才弄清楚制作表格和组合单元格和列以正确放置内容的概念。

一个小背景故事，我正在创建一个从我们的时事通讯系统发送到电子邮件的时事通讯标题。这意味着要在电子邮件中查看，据我所知，我们的电子邮件通讯系统不支持 div，所以我必须使用表格。其次，我们的时事通讯系统不接受我所说的（可能是错误的）“全球 Css 样式”，所以一切都必须符合要求。例如，当这个问题得到解决时，无论出于何种原因，我都必须将每个元素单独对齐。

现在我的问题是，公司标志一直在左边，其他元素一直在右边。除了 facebook、twitter 和linkedin logo，它们之间的空间都很小。现在我已经尝试了尝试并尝试寻找解决方案。

• “表格单元格 HTML 中元素之间的空格”
• “表格单元格 html 中元素之间的空格”
• “删除 html 元素之间的空格”（显示结果但无法为我工作）
• 还有许多其他...

请帮帮我，我完全不明白这个......

<table id="Header" width="700" height="75" border="0" cellpadding="0" cellspacing="0" align="center">
  <tr>
  <td rowspan="2">
    <a href="https://www.linktechs.net/productcart/pc/home.asp" target="_blank">
      <img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderLTILogoWeb.png" height="75" width="250">
    </a>
  </td>
		
  <td valign="top" align="right" width="" height="36">
    <img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_01.png" width="135" height="36">
      <a href="https://www.facebook.com/linktechnologiesinc/" target="_blank">
        <img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_02.png" width="42" height="36">
      </a>
      <a href="https://twitter.com/linktechsdotnet" target="_blank">
        <img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_03.png" width="38" height="36">
      </a>
      <a href="https://www.linkedin.com/company-beta/9211300/" target="_blank">
        <img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_04.png" width="41" height="36">
      </a>	
    </td>
  </tr>
	
  <tr align="right">
    <td colspan="3" align="right" valign="top">
      <a href="tel:314-7350270" target="_blank">
        <img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_05.png" width="113" height="39">
      </a>
      <a href="mailto:sales@linktechs.net" target="_blank">
        <img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_06.png" width="143" height="39">
      </a>
    </td>
  </tr>
</table>


<!--LINKS TO HEADER FILES IN ORDER
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderLTILogoWeb.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_01.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_02.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_03.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_04.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_05.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_06.png
-->

Answer 1

HTML 代码中<img> 和<a> 元素之间的实际空格正在成为每个图标之间的可见间隙。有几种方法可以解决这个问题：

1. 在此区域中消除 HTML 本身中的空格和换行符。您仍然可以使用 HTML cmets (<!-- -->) 分隔元素以进行组织，并在其中放置换行符。

2. 将style="font-size: 0;" 内嵌在包含这些图像的<td> 上，看看它是否消除了间隙的大小。

3. 使用 CSS float 使链接/图像相互对齐，方法是在每个链接上放置 style="float: left;"。

在社交媒体按钮部分实施的解决方案 #2 (font-size: 0) 用于演示：

<table id="Header" width="700" height="75" border="0" cellpadding="0" cellspacing="0" align="center">
  <tr>
    <td rowspan="2">
      <a href="https://www.linktechs.net/productcart/pc/home.asp" target="_blank">
        <img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderLTILogoWeb.png" height="75" width="250">
      </a>
    </td>

    <td valign="top" align="right" width="" height="36" style="font-size: 0;">
      <img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_01.png" width="135" height="36">
      <a href="https://www.facebook.com/linktechnologiesinc/" target="_blank">
        <img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_02.png" width="42" height="36">
      </a>
      <a href="https://twitter.com/linktechsdotnet" target="_blank">
        <img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_03.png" width="38" height="36">
      </a>
      <a href="https://www.linkedin.com/company-beta/9211300/" target="_blank">
        <img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_04.png" width="41" height="36">
      </a>
    </td>
  </tr>

  <tr align="right">
    <td colspan="3" align="right" valign="top">
      <a href="tel:314-7350270" target="_blank">
        <img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_05.png" width="113" height="39">
      </a>
      <a href="mailto:sales@linktechs.net" target="_blank">
        <img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_06.png" width="143" height="39">
      </a>
    </td>
  </tr>
</table>


<!--LINKS TO HEADER FILES IN ORDER
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderLTILogoWeb.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_01.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_02.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_03.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_04.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_05.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeaderSlice2_06.png
-->