Дополнительное пустое пространство между таблицами в html-письме для клиента gmail

Мой код находится в

Проблема в gmail оставляет лишнее пространство между двумя таблицами внутри одной и той же ячейки. Я пробовал display:block; margin:0; padding:0; line-height:0;

Однако, похоже, он не исчезает.

Есть ли исправление к этому?

Ответы

Ответ 1

Укладка HTML-сообщений ужасно.

Несколько советов:

border-spacing:0; /*this should fix the spacing problem*/

Вам нужно применить это ко всем таблицам, которые вы используете, поэтому вы должны включить его в блок <style> вверху так:

<head>
  <style>
    table {border-spacing: 0;}
  </style>
</head>

(извините за плохое форматирование, так или иначе код отказался правильно отображаться на нескольких строках)

Ответ 2

Использование стиля = "display: block" в теге изображения должно работать. Кроме того, не забудьте добавить его в образ spacer, если вы используете это.

Ответ 3

Я знаю, что это не то, что вы можете искать, но...
Освободите спейсер (spacer.gif), чтобы освободить большие пространства в ответных изображениях электронной почты, необходимо встроить в одну ячейку за строку, чем отобразить все блокированные изображения.
Надеюсь, это поможет, это было решение, которое я использовал в моем случае.
Одна ячейка в строке:

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <img src="image.jpg" width="600" height="300" />
        </td>
    </tr>
</table>

Ответ 4

display:block отлично справился с проблемой разрыва между моим телом и нижним колонтитулом, но ничего не сделал для моего заголовка; другие не исправлялись. Я знаю, что это старая нить, но в случае, если кто-то наткнулся на нее, и выше не помогло, это сделало это для меня:

Добавьте style="line-height:1px; font-size:0.0em;" в тег <td>, который содержит вашу таблицу заголовков.

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

Ответ 5

Просто добавьте style="line-height:50%" в <table>. Вы заметите, что это повлияет на высоту текстовой строки, если у вас есть текст в вашей почтовой программе. Чтобы исправить это, вам нужно добавить: style="line-height:100%" в текст <td> с текстом.

Ответ 6

Итак, я знаю, что это может показаться немного диким, но у меня была одна и та же проблема, и это оказалось брс в моем коде. Да, тот факт, что я отформатировал свой HTML, вложив мои tds, привел к тому, что gmail добавила новые tds с ярлыками br внутри.

Мне потребовалось время, чтобы понять, что мы конвертируем код заголовка и нижнего колонтитула в текст перед добавлением его в наши письма.

Если вы используете подобный подход, я бы предложил "минимизировать" ваш HTML.

Вместо:

<table>
    <tr>
        <td>
            Content
        </td>
    </tr>
</table>

Try:

<table><tr><td>Content</td></tr></table>

Как ужасно, как может показаться.

Ответ 7

Ну, я заметил, что содержимое заголовка и тела - это таблицы в другой ячейке. Почему бы вам не попытаться отделить заголовок и тело и перенести их на их выделенную строку?

Что-то вроде этого:

<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
       <!-- Header table -->
    </td>
  </tr>

  <tr>
    <td>
       <!-- Body table -->
    </td>
  </tr>
</table>

Кроме того, просто подсказка, не используйте тег <center> для центра. Если вы находитесь внутри ячейки таблицы, просто используйте align="center". Это также относится ко всей таблице, поэтому, чтобы центрировать таблицу, просто установите для свойства align значение center.

Ответ 8

Помимо добавления display:block в ваш img также добавьте cellpadding="0" cellspacing="0" border="0" к вашему table (важно: не забудьте также применить это к вашей упаковке table)

Приветствия

Ответ 9

просто добавьте

table{ 
font-size:0em;
border-collapse: collapse;
}

он решит вашу проблему