Кодирование HTML электронной почты - добавлены контур изображения / границы - gmail и Outlook

Question

Я кодирую простую электронную почту HTML, и я испытываю странное поведение в gmail, Outlook 2003 и 2007. Под всеми изображениями есть пробел.Мой встроенный стиль для изображений выглядит следующим образом:

border: none;
font-size: 14px;
font-weight: bold;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
text-transform: capitalize;
margin: 0px;
padding: 0px;

Все стили взяты из HTML-кода MailChimp и должны избегать несоответствий.Есть ли у вас опыт с этим?Изображения находятся внутри таблицы и разметки.Для ячеек таблицы также установлено значение cellspacing и cellpadding, равное 0.Вот скриншот проблемы: http://cl.ly/EnFt/o

Answer 1

Изображения inline по умолчанию.Этот небольшой промежуток, который вы видите, является местом для спусков, таких как «g» и «q».Чтобы решить эту проблему, вам нужно явно установить для всех изображений block элементов, например:

<img src="path/to/img.jpg" style="display:block;" border="0" alt="My Image" />

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

Стоит отметить, что display:block; будет означать, что каждое изображение должно быть в отдельном td илианалогично: изображения, которые должны отображаться рядом, будут отталкиваться друг от друга.

Answer 2

Просто используйте style="display:block;" для изображения тега. Он отлично работает.

Answer 3

укажите border:0; в своем теге <img>.Как это:

<img  style="vertical-align:top; border:0;">