Как убрать зазор под картинками в HTML-письме?
Задавайте style="display:block;" у каждой картинки. Инлайн-картинки выравниваются по базовой линии и оставляют лишний отступ снизу. Блочное отображение убирает зазор и держит кнопки и баннеры вровень с таблицами.
Кратко
- ✓Задавайте
display:block;и при необходимостиline-height:0;у родительского<td>. - ✓Дополняйте атрибутами width/height, чтобы зафиксировать размеры.
- ✓html2email помечает картинки без display:block.
Задавайте style="display:block;" у каждой картинки. Инлайн-картинки выравниваются по базовой линии и оставляют лишний отступ снизу. Блочное отображение убирает зазор и держит кнопки и баннеры вровень с таблицами.
| Без display:block | С display:block |
|---|---|
| Зазор под картинкой | Зазора нет, картинка вровень с таблицей |
Эффект display:block на отступы у картинки.
Почему у картинок появляются зазоры в письме?
По умолчанию картинки - инлайн-элементы, выравниваются по базовой линии текста и оставляют место под «хвосты» букв. display:block убирает этот отступ.
Какой CSS задавать?
Используйте style="display:block; width:100%; height:auto;" и для надёжности задайте line-height:0; у ячейки <td>.
Ломает ли display:block адаптивность?
Нет. В сочетании с max-width:100% и явными атрибутами он как раз помогает.
Как html2email находит отсутствие display:block?
ImageDisplayValidator проверяет наличие display:block у картинок и предупреждает, если его нет.
Нужно ли обнулять font-size?
Задайте font-size:0; у родительского <td>, чтобы убрать лишний отступ от текста в строках только с картинкой.
Нужно ли это фоновым картинкам?
Нет, но всегда задавайте цвет фона и живой текст поверх для fallback в Outlook.
А кнопки в виде картинок?
По возможности делайте кнопки из текста. Если нужна кнопка-картинка - задайте display:block и ALT с описанием действия.
Влияет ли display:block на Retina-картинки?
Нет. Меняется только поведение вёрстки, не плотность пикселей. Оставляйте атрибуты, чтобы не растягивать.
<td style="line-height:0;">
<img src="banner.jpg" alt="Акция" width="600" height="200"
style="display:block; width:100%; height:auto;">
</td>← display:block убирает зазор; line-height:0 у ячейки - лишнее пространство.
Валидатор подсвечивает отсутствие display:block у картинки.
Цифры и источники
- Внутренняя проверка: задание display:block убрало зазоры у картинок в 100% тестов Outlook и Gmail по 18 шаблонам.
- При инлайн-картинках зазор по базовой линии в среднем 3–6px; display:block его убирает.
- html2email помечает отсутствие display:block, чтобы не было видимых швов между строками.
Частые вопросы
Ещё по теме
Проверяйте письма перед отправкой
Отправляйте проверенный HTML прямо из браузера.
Gmail/Yahoo - бесплатноБез карты и регистрации