Блог

Главная - Вопросы по программированию - Проблема с изображением, совпадающим с текстом в подписи электронной почты

Проблема с изображением, совпадающим с текстом в подписи электронной почты

#html

Вопрос:

Невозможно разместить изображение даже с подписью в таблице. Верхняя часть изображения должна быть на том же уровне, что и верхняя часть текста

 <!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Email Signature</title>
</head>

<body>

  <table cellpadding="0" cellspacing="0" style="width: 100%;
        max-width: 560px">
    <tr>
      <td width="5%" valign="middle">
        <img href="https://www.pravoconstruction.com/" src="https://media-exp1.licdn.com/dms/image/C4E0BAQGQicp-n_FWzw/company-logo_200_200/0/1530564205372?e=2159024400amp;v=betaamp;t=OdxbaYftUNG_-cf8lLTWVA-voPANK8goWs3hiafOo84" style="width: 30%;min-width: 62px;
                  display: block;">
      </td>
      <td width="70%" valign="top">
        <h4 style="margin:0 0 5px; font-size: 9px;font-family: arial;color:#99A3A4; line-height:1.2"><strong>test email</strong></h4>
        <h5 style="margin:0 0 5px; font-size: 8px;font-family: arial;color:#99A3A4; line-height:1.2">job role | 123.456.7890</h5>
        <h5 style="margin:0 0 5px; font-size: 8px;font-family: arial;color:#99A3A4; line-height:1.2">1234 anywhere lane | Texas,TX 77777</h5>
      </td>
    </tr>

  </table>

</body>

</html>

Ответ №1:

Похоже, что на вашей фотографии есть некоторое пространство внутри изображения, что, вероятно, приводит к тому, что оно выглядит не выровненным. Если вы хотите компенсировать это, я бы предложил добавить немного отступов в верхнюю часть h4.

Кроме того, вы можете обрезать изображение, чтобы на нем не было этого места сверху.

Изображение с пробелами

Комментарии:

1. Спасибо! В этом-то и была проблема. Также не помогает то, что Google на самом деле не позволяет вам делать так много при копировании и вставке в поле для подписи.

Метки: ,