Почему высота ячейки отличается от заданной?

Question

[caof19]

Здравствуйте, верстаю письмо для email рассылки, в данный момент делаю кнопку, вот код:

<table>
  <tr>
    <td width="40" height="10"></td>
      <td width="27" height="10" style="background: #0083C2; border-radius: 7px 0 0 0;"></td>
      <td style="background: #0083C2;" height="10"></td>
      <td width="27" height="10" style="background: #0083C2; border-radius: 0 7px 0 0;"></td>
      <td width="40" height="10"></td>
    </tr>
    <tr>
      <td width="40"></td>
      <td width="27" style="background: #0083C2;"></td>
      <td style="background: #0083C2;"><a style="color: #fff; text-decoration: none;font-size:17px;" href="">Подробнее</a></td>
      <td width="27" style="background: #0083C2;"></td>
      <td width="40"></td>
    </tr>
    <tr>
      <td width="40" height="10"></td>
      <td width="27" height="10" style="background: #0083C2; border-radius: 0 0 0 7px;"></td>
      <td style="background: #0083C2;" height="10"></td>
      <td width="27" height="10" style="background: #0083C2; border-radius: 0 0 7px 0;"></td>
      <td width="40" height="10"></td>
     </tr>
 </table>

В браузере все выглядит как нужно:

отправляю на почту, и почему верхнии и нижние ряды становятся 21 пиксель, вместо заданных 10

Comments

[Николай Чуприк]

Вы из какого века?

[caof19]

Николай Чуприк, У вас есть идея получше?

[Banan44]

caof19, он про то что таблицы никто не использует

[Banan44]

caof19, проще на флексах или гридах сверстать что-то подобное

[caof19]

Banan44, вы/он верстали для почтовых сервисов? В частности для outlook?

[Ankhena]

caof19,

и почему верхнии и нижние ряды становятся 21 пиксель, вместо заданных 10

Я бы подумала на минимальный размер шрифта. Но черт знает что там в аутлуке, давно не видела его.

Answer 1

[Николай Чуприк]

<a class = "like-button" href = "">Подробнее</a>

<style>
  .like-button  {
    color: white;
    font-size: 17px;
    font-family: arial;
    text-decoration: none;
    background: #0083C2;
    padding: 16px 32px;
    border: none;
    border-radius: 7px;
  };
</style>

Так, как вы делаете, никто не делает лет 20! Изучите современную вёрстку и CSS.

Поведение таблиц плохо предсказуемо. Как они там определяют ширину ячеек, когда намешаны пикселы, проценты, auto — для меня загадка (ниасилил). Думаю, что в вашем случае разница высот ячеек из-за того, что почтарь добавляет в пустые ячейки пробел. А пробел — это уже шрифт определённой высоты, поэтому ячейка и раздвигается по высоте, чтобы он поместился. Чтобы проверить мою гипотезу, можно пустым ячейкам задать какой-нибудь очень маленький размер шрифта (или наоборот очень большой), и посмотреть, что будет.

Но, опять-таки, это только спортивный интерес, и, повторюсь, так делать не надо.

P.S. offtop: Кто-то в наше время ещё пользуется Outlook?

Comments

[caof19]

Во-первых, бордер радиус не работает в аутлук
Во-вторых, паддинг не работает в аутлук
В-третьих, центрирование тоже не работает в аутлук (через style)
В четвертых, если вы не пользуетесь аутлук, это не значит что им не пользуется никто, по данным на 2019 год, среди почтовых клиентов, ему принадлежит 9%
В пятых, давайте не будем давать советы о том, что мне изучить, вопрос был поставлен про таблицы, а вы поголовно отвечаете "это не модно/кто так вообще делает"

[Николай Чуприк]

caof19, вы конечно советов не просите, но мне кажется, что стилизовать письма вообще неправильно, не тот жанр. Письмо должно быть плэйн текстом. Допустим тэг <a> без стилизации, и всё.

Кстати, у вам же border-radius используется для ячеек.

[caof19]

Николай Чуприк, не могу с вами поспорить, но каждый хочет красивое письмо - раз, а два заказчику не объяснишь, что такое сделать нельзя, приходится выкручиваться