Outlook邮件模板内边距错位：左右按钮对齐修复咨询

Ah, Outlook's Word-based rendering engine strikes again! It's super common for email templates that look perfect in browsers to break in Outlook—especially with spacing and alignment issues like your misaligned buttons. Let's break down the problem and fix it step by step.

Why This Happens #

Outlook doesn't play nice with modern CSS like percentage-based padding or even some inline margin values. Your browser calculates percentages based on the parent container's dimensions accurately, but Outlook's engine miscalculates these values, leading to inconsistent spacing between your left and right buttons. Additionally, fixed height attributes on table cells can throw off the layout if content stretches beyond that value.

Step-by-Step Fixes #

Here are the key changes you need to make to get those buttons aligned:

1. Ditch percentage padding for fixed pixel spacing
   Replace the padding-top:6% and padding-top:4% on your button images with fixed pixel-based spacing using table rows (Outlook handles this far more reliably). Instead of inline padding on the image, add an empty table row above the button to control the gap:

   <!-- Empty row for consistent top spacing (adjust height to match your needs) -->
   <tr>
     <td height="36" style="font-size:0; line-height:0;">&nbsp;</td>
   </tr>
   <tr>
     <td>
       <a href="https://adad.co/2019/03/29/well-is-the-way-to-go/" target="_blank">
         <img createnew="true" src="http://newsletter.etiketa-dev.xyz/nl-27/cta1.jpeg" style="padding-top:0;" width="250" height="60">
       </a>
     </td>
   </tr>
   

   Use the exact same height value for both left and right empty rows to guarantee perfect alignment.

2. Replace image padding with table rows
   Outlook ignores padding-bottom on images, so instead of <img style="padding-bottom:10px;">, add an empty row after the image to create the gap:

   <tr>
     <td><img createnew="true" src="https://multimedia.getresponse.com/getresponse-zMTNQ/photos/563de7a4-ca7d-462a-88be-1cd31ef21fc4.jpg" width="250" height="250"></td>
   </tr>
   <tr>
     <td height="10" style="font-size:0; line-height:0;">&nbsp;</td>
   </tr>
   

3. Remove problematic fixed heights
   The fixed height="139" on your content cells can cause Outlook to stretch the cell unevenly if your text is longer than expected. Remove this attribute and let the content naturally determine the cell height—then use empty rows to adjust spacing uniformly across both columns.

4. Ensure consistent table alignment
   Double-check that both your left and right inner tables have identical width attributes and that all tables use cellpadding="0" and cellspacing="0" to prevent unexpected gaps.

Modified Button Section Example #

Here's how your corrected button areas will look:

<!-- Left Column Button Section -->
<tr>
  <td height="36" style="font-size:0; line-height:0;">&nbsp;</td>
</tr>
<tr>
  <td>
    <a href="https://adad.co/2019/03/29/well-is-the-way-to-go/" target="_blank">
      <img createnew="true" src="http://newsletter.etiketa-dev.xyz/nl-27/cta1.jpeg" width="250" height="60">
    </a>
  </td>
</tr>

<!-- Right Column Button Section -->
<tr>
  <td height="36" style="font-size:0; line-height:0;">&nbsp;</td>
</tr>
<tr>
  <td>
    <a href="https://asdad.co/2019/03/29/ctbuh-premiers-in-eastern-europe/" target="_blank">
      <img createnew="true" src="http://newsletter.etiketa-dev.xyz/nl-27/cta1.jpeg" width="250" height="60">
    </a>
  </td>
</tr>

Final Tips #

• Always test your template in desktop Outlook (not just the web version) since they use different rendering engines.
• Stick to table-based layouts for email—they're the most reliable across all email clients, especially Outlook.
• Avoid using CSS properties like margin, non-table padding, and percentage units for spacing in Outlook-focused templates.

内容的提问来源于stack exchange，提问作者Elife