Удалить интервал между строками таблицы в электронной почте HTML

Question

Позвольте мне начать с того, что я давно не создавал электронную почту в формате HTML; Я слишком долго был избалован CSS, поэтому возвращение к созданию вещей из таблиц невероятно расстраивает. У меня проблемы с тем, чтобы два ряда сидели вплотную друг к другу; есть пробел, который я не могу устранить, что бы я ни пытался. Обыскивая другие посты на С.О. только дает решения, которые я уже пробовал, и которые не сработали. Около 40% целевой аудитории просматривают электронные письма в Outlook, что означает, что поддержка CSS невероятно ограничена. Вещи, которые я пробовал:

• border-collapse: collapse (который я уже установил по умолчанию с самого начала)
• настройка поля: 0 (почти везде)
• cellspacing и cellpadding to zero (что я уже сделал по умолчанию при создании таблиц).
• display: block и display: inline-block (на самом деле не поддерживается Outlook, но все равно не решает мою проблему).

Вот мои фрагменты кода (игнорируйте любые классы CSS; опять же, пока нет встроенного CSS, это просто заполнители на данный момент. Любой встроенный CSS в первую очередь будет предназначен для решения проблем, связанных с почтовым клиентом.)

<!--2 Column Layout : BEGIN-->
<tr>
  <td align="center" valign="top" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
    <table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse:collapse; border:0px; border-spacing:0px;">
      <tr>
        <td class="stack-column-center" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
          <table cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; border:0px; border-spacing:0px;">
            <tr>
              <td style="text-align: center; padding:0px; border-width:0px; margin:0px;">
                <img src="http://i1024.photobucket.com/albums/y303/aadBresco/monkey_wrench_zpstk6rgf3j.png" width="300" alt="Monkey Wrench" border="0" class="fluid">
              </td>
            </tr>

          </table>
        </td>

        <td class="stack-column-center" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
          <table cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; border:0px; border-spacing:0px;">
            <tr>
              <td style="text-align: center; padding:0px; border-width:0px; margin:0px;">
                <img src="http://i1024.photobucket.com/albums/y303/aadBresco/auto_parts_zpsf1bs9tgv.png" width="300" alt="Auto Parts" border="0" class="fluid">
              </td>
            </tr>

          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>
<!--2 Column Layout : END-->

<!--2nd Hero Image : BEGIN-->
<tr>
  <td class="full-width-image">
    <img src="http://i1024.photobucket.com/albums/y303/aadBresco/sliced-bread_zpsxt8z6pjt.png" width="600" alt="Sliced Bread" border="0" align="center" style="width: 100%; max-width: 600px; height: auto;">
  </td>
</tr>
<!--Hero Image : END-->

Небольшой зазор в нижней части ряда виден, если вы внимательно посмотрите. Это 4px в высоту.

Answer 1

Поскольку ваш img не содержит ширины (даже auto), инициализируйте его как элемент блока. Поскольку вы упомянули, что блок не поддерживается в вашем случае, я добавил display:table для вашего img. Я добавил рабочий фрагмент с этим ответом.

img {
  display: table;
}

<!--2 Column Layout : BEGIN-->
<tr>
  <td align="center" valign="top" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
    <table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse:collapse; border:0px; border-spacing:0px;">
      <tr>
        <td class="stack-column-center" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
          <table cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; border:0px; border-spacing:0px;">
            <tr>
              <td style="text-align: center; padding:0px; border-width:0px; margin:0px;">
                <img src="http://i1024.photobucket.com/albums/y303/aadBresco/monkey_wrench_zpstk6rgf3j.png" width="300" alt="Monkey Wrench" border="0" class="fluid">
              </td>
            </tr>

          </table>
        </td>

        <td class="stack-column-center" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
          <table cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; border:0px; border-spacing:0px;">
            <tr>
              <td style="text-align: center; padding:0px; border-width:0px; margin:0px;">
                <img src="http://i1024.photobucket.com/albums/y303/aadBresco/auto_parts_zpsf1bs9tgv.png" width="300" alt="Auto Parts" border="0" class="fluid">
              </td>
            </tr>

          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>
<!--2 Column Layout : END-->

<!--2nd Hero Image : BEGIN-->
<tr>
  <td class="full-width-image">
    <img src="http://i1024.photobucket.com/albums/y303/aadBresco/sliced-bread_zpsxt8z6pjt.png" width="600" alt="Sliced Bread" border="0" align="center" style="width: 100%; max-width: 600px; height: auto;">
  </td>
</tr>
<!--Hero Image : END-->

Answer 2

Поскольку display:block не было решением, я попытался удалить объявление <!doctype html>, и это устранило проблему. Обычно я не думаю, что это было бы приемлемо, но, насколько мне известно - и после тестирования - это не оказывает какого-либо негативного влияния на HTML-письмо .

Answer 3

Я хорошо выгляжу; неплохо. Кроме того, вам не нужно добавлять все детали CSS в каждую строку и столбец; просто добавьте: или или; и затем в своем листе css (если у вас его нет, просто создайте) добавьте td.Wh независимо от того, что вы решите назвать, или tr.Wh независимо от того, что вы решили назвать, или таблицу. Что бы вы-решили к имени-его.

Надеюсь, это поможет !!!