为什么我的 <div> 容器中的元素之间有空格？答案

【问题标题】：Why is there white space between the elements in my <div> container?为什么我的 <div> 容器中的元素之间有空格？
【发布时间】：2020-03-28 10:56:24
【问题描述】：

我对 HTML 非常陌生，并且我已经构建了一个自定义 HTML 电子邮件签名。我希望它看起来像这样：

但是，使用下面的代码，我将彼此相邻分组的三个字符串最终在第一个字符串和后续字符串之间有空格，如下所示

将三个字符串组合在一起而不在元素之间产生间隙的正确方法是什么？

<div class="presentational-container">
  <table role="presentation" cellpadding="0" cellspacing="0" border="0"style="background: none;margin: 0;padding: 10px 10px 0;border-width: 1px 0 0 0;border-style: solid;border-color: #F2F2F2;">
    <tbody>
      <tr class="outer-row" style="padding: 0 12px 0 0;">
        <td class="headshot-cell" style="text-decoration: none;vertical-align: middle;width: 72px;padding: 0 6px 0 0;">
          <a href="http://www.robertcooper.me">
            <img src="https://tetonsports.imagerelay.com/ql/6cde221aa42c4ec8b325b3c0f6235d2e/email-icon-01.png" name="preview-image-url" style="vertical-align: middle;width:72px"/>
          </a>
        </td>
        <td class="description-cell">
          <table role="presentation">
            <tbody>
              <tr>
                <td colspan="2" class="company" style="font-weight: normal;color: #000001;font-size: 14px;font-family: Helvetica, Geneva, sans-serif;">TETON Sports</td>
              </tr>
              <tr>
                <div>
                  <td colspan="2" class="name" style="font-weight: bold;color: #000001;font-size: 14px;font-family: Helvetica, Geneva, sans-serif;">Josh Jorgensen</td>
                  <td colspan="2" class="divider" style="font-weight: bold;color: #FF9E18;font-size: 14px;font-family: Helvetica, Geneva, sans-serif;">//</td>
                  <td colspan="2" class="title" style="font-style: italic;font-weight: normal;color: #54565A;font-size: 14px;font-family: Helvetica, Geneva, sans-serif;">Photographer</td>
                </div>
              </tr>
              <tr>
                <td valign="top" class="website" style="font-style: italic;font-weight: normal;color: #54565A;font-size: 14px;font-family: Helvetica, Geneva, sans-serif;">
                  <a href="josh@tetonsports.com">josh@tetonsports.com</a>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</div>

【问题讨论】：

不是空格，只是“评论”在相邻列。我可能会将整个文本字符串设置为单个 td 列，并且可能使用 span 单独设置文本样式

标签： html html-table html-email

【解决方案1】：

这三个文本部分位于单独的表格单元格中，这些表格单元格甚至有colspan="2"。所以这些与上面和下面也有colspan="2"的行的表格单元格对齐。

我要么将所有三个放在一个单元格中，要么至少从中删除 colspan="2" 并将 colspan="3" 添加到下方和上方的单元格中，因为所有行都应该具有相同的数量用于正确排列的单元格。

【讨论】：