Как устранить некорректное отображение padding в Outlook

Быстрый ответ

Для регулировки отступов в электронных письмах, рассылаемых через Outlook, необходимо воспользоваться тегом <td> в сочетании с атрибутом style, задавая отступы при помощи inline CSS.

<td style="padding:20px;">Ваш контент</td>

Однако, с учётом потенциальных проблем отображения отступов в Outlook, полезным может стать использование атрибута cellpadding в HTML-таблицах:

<table>
  <tr>
    <td cellpadding="20">Ваш контент</td>
  </tr>
</table>

Такой подход обеспечивает корректное отображение отступов в различных версиях Outlook.

Возникают проблемы с отступами? Попробуйте применить внутренние поля ячеек

Outlook характеризуется своим особенным обращением с CSS, в частности, с отступами. Вот где выручают таблицы – они легче поддаются управлению.

Использование вложенных таблиц с атрибутом cellpadding – это своего рода терапия для Outlook. Посмотрите на пример такого подхода:

<table>
  <tr>
    <td>
      <table cellpadding="10">
        <tr>
          <td><!-- Запросы на отступы являются лишь одним из возможных вариантов --></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Это еще увеличивает вероятность корректной обработки padding Outlook'ом.

Outlook упорно требует заполнителей? Попробуйте прозрачные изображения

Бывают случаи, когда в Outlook для корректной установки высоты и ширины требуется использовать прозрачные изображения, так называемые Contact Lenses for Outlook. Это может быть однопиксельное изображение размером 1х1, подгоняемое под ваш макет:

<td>
  <img src="blank.gif" width="20" height="20" style="display:block;">
  <!-- Отступы, подобно воздуху, ощущаются только при их отсутствии -->
</td>

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

Предпочитайте инлайновые стили

Outlook, в отличие от современных браузеров, предпочитает инлайновые стили. Следует использовать вместо внешних стилевых таблиц CSS, принимая во внимание HTML-элементы:

<td style="font-size:16px; color:#333;">
   <!-- Контент, к которому Outlook проявляет доброжелательность -->
</td>

Данный подход улучшает совместимость и способствует равномерному применению стилей в различных почтовых клиентах.

Оптимизация за счёт упрощения (однородности)

Для улучшения совместимости с Outlook следует упростить CSS и обращаться к более простым HTML-решениям. Этот метод может показаться некоторой регрессией, однако он помогает добиться консистентности при просмотре писем в различных системах.

Визуализация

Представьте, что письмо помещено в конверт:

Конверт (📧): Ожидается, что в него будет помещено содержимое стандартного размера.
Письмо (📜): Оформлено с привлекательными краями (отступами).

В идеальном мире:

📜 помещено в 📧: Отступы выглядят так, как и предполагалось.

Но когда дело доходит до Outlook:

📧 (Outlook): Правила? Фигня! Они для других.
📜 в 📧: Края? О каких краях идет речь? 🤷‍♂️

Соответственно, реальность часто выглядит так:

Ожидается: 📜🖼️📧 | Реальность: 📜🤏📧

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

Адаптивный дизайн: в стиле Outlook

Широко принято, что достижение адаптивности осуществляется с помощью медиа-запросов, но Outlook действует по своим правилам.

В Outlook ключом к созданию адаптивных писем являются гибкие таблицы и процентные ширины.

<table width="100%">
  <tr>
    <td width="50%">
    <!-- Раньше не хватало места -->
    </td>
    <td width="50%">
    <!-- Теперь слишком много места... Четкости, где ты? -->
    </td>
  </tr>
</table>

Борьба с проблемами границ? Примените border-collapse

В случае Outlook границы могут отображаться двойными, особенно между ячейками. Решение — использовать свойство border-collapse: collapse; в вашей таблице.

<table style="border-collapse: collapse;">
  <!-- ... -->
</table>

Такой простой шаг может помочь решить проблемы с границами и обеспечить их правильное отображение.

Отступы в ячейках: неоценимая помощь в скрытности

Атрибут cellpadding в HTML-таблицах, хоть и кажется устаревшим, предлагает эффективный способ добавления пространства внутри ячеек.

<table cellpadding="10">
  <tr>
    <td>Содержимое попадает туда, где предполагалось</td>
  </tr>
</table>

Полезные материалы

1. Подробный обзор поддержки CSS в почтовых клиентах с Can I Email – анализ поддержки отступов CSS в различных почтовых клиентах.
2. Обсуждения проблем с отступами в Outlook на Stack Overflow – советы и рекомендации от сообщества по решению проблем с отступами в Outlook.
3. Руководство по созданию адаптивных электронных писем, правильно отображающихся в Outlook, от Smashing Magazine – детальное руководство по созданию HTML-писем, которые хорошо выглядят в Outlook.