Как удалить все пробелы, связанные с электронной почтой HTML?

У меня есть следующие html и css для использования в качестве шаблона для генерации сообщений электронной почты.Как удалить все пробелы, связанные с электронной почтой HTML?

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

Можно ли удалить его при использовании div или есть ли другой способ избежать этих раздражающих пробелов?

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>Lack of title</title> 
 
    <link href='https://fonts.googleapis.com/css?family=PT+Mono&subset=latin,latin-ext' rel='stylesheet' type='text/css'> 
 
    <style> 
 
     body, html { 
 
      margin: 0!important; 
 
      padding: 0!important; 
 
      background-color: gray; 
 
     } 
 

 
     #nav { 
 
      height: 60px; 
 
      width: 100%; 
 
      background-color: #0078d7; 
 
     } 
 

 
     #content { 
 
      width: 1160px; 
 
      height: 800px; 
 
      background-color: #6f6767; 
 
      margin-left: auto; 
 
      margin-right: auto; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div id="nav"> 
 
     {title} 
 
    </div> 
 
    <div id="content"> 
 
     {content} 
 
    </div> 
 
</body>

источник

2016-06-05 Dartek12

В каком почтовом клиенте вы видите белые грани? Outlook 2010, Outlook 2013, Gmail, Yahoo и т. Д.?? –

Разные клиенты электронной почты визуализации HTML электронной почты по-разному. Но есть несколько основных практик, которым вы должны придерживаться (см. Ссылки ниже).

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

Поскольку браузерные приложения электронной почты, такие как Gmail, вырезать <head> и <body> тегов по умолчанию, всегда использовать встроенный CSS через встроенный CSS.

Итак, padding: 0 и margin: 0 в вашем head разделе, возможно, игнорируются или переопределены.

Разработка HTML-сообщений электронной почты не похожа на разработку HTML-сайтов. Между почтовыми клиентами и веб-браузерами существует огромный технологический разрыв. Это похоже на то, что браузеры продолжают развиваться, но клиенты электронной почты застряли в 1998 году.

В мире электронной почты HTML встроенные и внешние стили плохи, встроенные стили хороши, javascript плохо, таблицы для макета - хорошо. В этом мире методы кодирования старой школы живы и здоровы.

Дополнительная информация:

источник

2016-06-05 22:54:32

Из-за способа электронной почты клиентов визуализации HTML - и многие из них делают тот же HTML по-другому, ты «Лучше не строите свое электронное письмо со столами. Таблицы, по-видимому, распознаются для всех клиентов.

Кроме того, всегда используйте встроенные стили, поскольку внутренние и внешние таблицы стилей могут вызывать проблемы. Этот код, похоже, избавляется от пробелов перед большинством клиентов:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Lack of title</title> 
    <link href='https://fonts.googleapis.com/css?family=PT+Mono&subset=latin,latin-ext' rel='stylesheet' type='text/css'> 
    <style> 

    </style> 
</head> 
<body> 

<div> 
<table width="100%" bgcolor="#333333" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="100%"> 

<table width="100%" height="60" bgcolor="#0078d7" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td width="100%" height="60"> 
      {nav} 
     </td> 
    </tr> 
</table> 

</td> 
</tr> 

<tr> 
<td> 

<table width="1160" height="800" bgcolor="#6f6767" border="0" cellspacing="0" cellpadding="0" align="center"> 
    <tr> 
     <td width="1160" height="800"> 
      {content} 
     </td> 
    </tr> 
</table> 

</td> 
</tr> 
</table> 
</div> 

</body> 
</html>

источник

2016-06-07 09:26:46

Как удалить все пробелы, связанные с электронной почтой HTML?

ответ

Смежные вопросы