резня вертикального поля в электронных письмах HTML

Question

Я знаю, что рендеринг электронной почты в HTML - это пустяк, но это слишком странно.

Я пытаюсь получить постоянный вертикальный интервал между моими элементами. У меня есть <hr> элементы, которые я использую в качестве разделителей, и я пытаюсь применить к ним верхние / нижние поля. Тем не менее, даже несмотря на то, что я применяю эти поля встроенно, CSS проверяется, когда я проверяю его в своем клиенте gmail.

Например,

Отправлено как:

<hr style='margin:20px 0 2px 0;' />

Получено как:

<hr style='margin:2 0px 0 2px 0;' />

Что ?? ...

Отправлено как:

<hr style="margin-top:20px; margin-bottom:2px;" />

Получено как:

<hr style="margin-bottom:2px;" />

Давай ...

Я думал, что встроенные стили будут безопасны, и что даже если рендеринг не удался, по крайней мере, настоящий CSS не будет искажен. С чем я здесь сталкиваюсь?

(я отправляю их с помощью стандартных функций PHP mail () с сайта WordPress)

Answer 1

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

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

Я бы выбрал первый метод, потому что он опробован и проверен большинством популярных клиентов. Альтернативу стоит попробовать, если вам неудобно использовать таблицы для настройки макета.

Никогда не рекомендуется использовать сокращенные свойства в HTML-письмах, поскольку некоторые клиенты не поддерживают сокращенные свойства.