Как исправить отступы и пробелы в электронных письмах HTML

1. Какие ДОКТИПЫ вызывают проблемы с расстоянием?
2. Как обычно выглядят пробелы
3. Добавьте стиль = "display: block" к вашему изображению
4. Установите атрибут «Выровнять»
5. Установите высоту строки на 10 пикселей или меньше
6. Установите размер шрифта на 2 пикселя или меньше
7. Используйте Float: слева или Float: справа
8. Как исправить интервал, если ваше изображение менее 16 пикселей в высоту:
9. Проблема с пробелами или нет - не забудьте проверить!
10. Автор: Электронная почта на кислоте

Этот пост был обновлен 9 мая 2018 года. Первоначально он был опубликован в декабре 2010 года.

Вы когда-нибудь замечали небольшой интервал под изображениями в Outlook.com а также Gmail ? Каждый браузер отображает этот интервал, кроме IE 7 и ниже. После долгих попыток мы поняли, что DOCTYPE был виновником этой надоедливой проблемы с пространством в электронных письмах HTML.

Что нам еще интереснее, так это то, что последний DOCTYPE для HTML5 вызывает те же проблемы с расстоянием между изображениями. Из-за этого в ближайшем будущем могут появиться такие браузеры, как Firefox, Safari, Chrome и Opera. До тех пор, есть несколько обходных путей, которые мы можем использовать.

Хотя эти обходные пути могут исправить проблемы с пробелами, все же важно проверить свою электронную почту - Вы никогда не знаете, какие другие ошибки дизайна вы найдете. С Электронная почта на Acid вы можете увидеть, как выглядит ваша электронная почта на более чем 70 почтовых клиентах и ​​устройствах, прежде чем нажать «отправить».

Какие ДОКТИПЫ вызывают проблемы с расстоянием?

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <! DOCTYPE html>

Как обычно выглядят пробелы

Как избавиться от лишнего пространства

Существует несколько изменений кода и обходных путей, которые можно использовать для устранения проблемы с пространством в электронных письмах Outlook.com и Gmail:

Добавьте стиль = "display: block" к вашему изображению

Это самое популярное исправление для дополнительного заполнения и пространства. Однако, как вы можете видеть ниже, он создает разрыв строки до и после вашего изображения. Если вы работаете с электронной почтой в формате HTML, это исправление должно быть встроено для каждого изображения, поскольку Gmail не поддерживает встроенные или связанные таблицы стилей.

Вот пример этого кода в действии:

<img src = "https://www.test.com/test.jpg" style = "display: block">

Установите атрибут «Выровнять»

Если высота вашего изображения превышает 16 пикселей, установите для атрибута изображения «align» любое из следующих значений:

• absmiddle
• средний
• оставил
• право
• absbottom
• texttop
• Топ

Важно отметить, что align = ”baseline” и align = ”bottom” не работают.

Посмотрите примеры кода ниже, чтобы увидеть, как работает это исправление:

<img src = "https://www.test.com/test.jpg" align = "absbottom">

Установите высоту строки на 10 пикселей или меньше

Для этого решения просто поместите изображение в элемент блока со стилем = ”line-height: 10px” (или меньше).

Вот пример:

<div style = "line-height: 10px"> <img src = "https://www.test.com/test.jpg"> </ div>

Установите размер шрифта на 2 пикселя или меньше

Как и в решении с высотой строки, это исправление помещает изображение в элемент блока со стилем = «font-size: 2px» (или меньше). Это вариант, если у вас нет текста в контейнере.

Например:

<div style = "font-size: 2px"> <img src = "https://www.test.com/test.jpg"> </ div>

Используйте Float: слева или Float: справа

И Gmail, и Outlook.com поддержать свойство float. Опять же, если вы работаете с электронной почтой в формате HTML, это исправление должно быть встроено для каждого изображения, потому что Gmail не поддерживает встроенные или связанные таблицы стилей ,

Для этого решения добавьте style = ”float: left” ИЛИ style = ”float: right”.

Вот пример:

<img src = "https://www.test.com/test.jpg" style = "float: left">

Как исправить интервал, если ваше изображение менее 16 пикселей в высоту:

К сожалению, не все эти решения будут работать, если ваше изображение меньше 16 пикселей в высоту. Если вы оказались с меньшим изображением, используйте эти исправления:

• Добавьте стиль = "display: block" к изображению
• Добавьте выровнять = "влево" к изображению
• Добавьте align = ”right” к изображению
• Добавьте стиль = "float: left" к изображению
• Добавьте стиль = "float: right" к изображению
• Поместите изображение в элемент блока со стилем = ”line-height: 10px” или равным высоте изображения
• Поместите изображение в элемент блока со стилем = ”font-size: 2px” (или ниже)

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

Проблема с пробелами или нет - не забудьте проверить!

Эти обходные пути могут помочь вам исправить некоторые пробелы, но даже малейшее изменение кода может привести к потере дизайна электронной почты. Вот почему так важно проверять каждое письмо каждый раз , С Электронная почта на Acid Вы можете просмотреть свой дизайн на более чем 70 клиентах и ​​устройствах, чтобы знать, как будет выглядеть ваша электронная почта, прежде чем она попадет в папку «Входящие». Попробуйте нас бесплатно в течение 7 дней и убедитесь сами.

НАЧНИТЕ ИСПЫТАНИЕ СЕГОДНЯ!

Автор: Электронная почта на кислоте

Блог «Электронная почта на Acid» предназначен для того, чтобы делиться лучшими практиками, новостями и решениями в области электронной почты для устранения наиболее досадных ошибок почтового клиента. Плюс, мы хотели бы немного повеселиться по пути. Узнайте, как вступить в партию и внести свой вклад в наш блог ,

Похожие

Комментарии