3 ответа

  1. попробуйте сделать box-sizing:border-box; свойство в контейнере buttons, а затем попробуйте их поля

  2. Просто переместите определения border-radiusи bgcolorкнопки себе, чем вы можете добавить paddingна tdИ это будет делать трюк. использовать padding:

    <table>
      <tr>
        <td data-bgcolor="bg-button" data-size="size button" data-min="10" data-max="16" class="btn" align="center" style="font:12px/14px Arial, Helvetica, sans-serif; color:#292c34; text-transform:uppercase; mso-padding-alt:12px 10px 10px; padding-right:5px; ">
          <a target="_blank" style="text-decoration:none; color:#ffffff; display:block; padding:12px 20px 10px;background-color:#8B0000;border-radius:8px;" href="http://www.holidayvacations.net/index.php?page=catalog">Request a Catalog!</a>
        </td>
    
    
        <td data-bgcolor="bg-button" data-size="size button" data-min="10" data-max="16" class="btn" align="center" style="font:12px/14px Arial, Helvetica, sans-serif; color:#292c34; text-transform:uppercase; mso-padding-alt:12px 10px 10px;padding-left: 5px;">
          <a target="_blank" style="background-color:#8B0000;text-decoration:none; color:#ffffff; display:block; padding:12px 20px 10px;border-radius:8px;" href="http://www.holidayvacations.net/hvadmin/uploads/Flip_Books/Catalog/Catalog.html">View Online Catalog!</a>
        </td>
      </tr>
    </table>

  3. В дизайне электронной почты нет стыда в использовании символа неразрывного пространства

    &nbsp;

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

    В стороне, я не знаю, если вы тестируете в диапазоне почтовых клиентов, но если вам нужно, чтобы сделать его работать с Outlook, и подобный, то css, как border-radius не будет уважаться. Это довольно хорошее руководство к тому, что безопасно: https://www.campaignmonitor.com/css/