定位元素并删除 outlook 中形状的左右边距

Question

这是我第一次使用 html 和 css，我正在尝试创建一个 html 电子邮件模板，但遇到了 outlook 问题。出于某种原因，我的白色矩形没有位于电子邮件的底部，并且我在左侧和右侧都有一个小边距，如下图所示。

经过一番挖掘，我发现 outlook 并没有呈现所有属性，例如

position

、

opacity

和

margin

。会很感激帮助解决这个问题。这是我那部分的代码片段：

<tr>
 <td style="direction: rtl; background-color: white; font-size: 20px; opacity: 70%; width: 100%; text-align: center;" width="100%">
   <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 0 auto !important; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="100%">
      <tr>
         <td width="600px">
             <div class="hero" style="text-align: center; display: inline-block !important; line-height: 50px;">
                 <p style="font-size: 16px; font-family: Heebo, Gisha,sans-serif; font-weight: bold; line-height: 1.5; margin-top: 0px; margin-bottom: 0px; text-align: center; color: #2F2F2F;">text</p>
                 <div class="social-icons" style="text-align: center; margin-top: -8px;">
                  <a href="https://www.linkedin.com/company/tara-strategic-consulting/" class="social-icon" style="display: inline-block; padding: 10px 20px; font-size: 30px; color: white; text-decoration: none; transition: color 0.3s ease-in-out;" padding="10px 20px"><img src="cid:linkedin_icon" alt="linkedin_icon"></a>
                  <a href="https://www.facebook.com/TaraConsulting/" class="social-icon" style="display: inline-block; padding: 10px 20px; font-size: 30px; color: white; text-decoration: none; transition: color 0.3s ease-in-out;" padding="10px 20px"><img src="cid:facebook_icon" alt="facebook_icon"></a>
                  <a href="https://tara-il.com/" class="social-icon" style="display: inline-block; padding: 10px 20px; font-size: 30px; color: white; text-decoration: none; transition: color 0.3s ease-in-out;" padding="10px 20px"><img src="cid:website_icon" alt="website_path"></a>
             </div>
           </div>
         </td>
      </tr>
   </table>
</td>

Answer 1

我不知道你是否已经尝试过，但 margin 有效，当在 outlook 中大写时，所以你应该尝试使用 Margin: 0;而不是保证金：0；对于定位，您可以查看此链接：https://www.goodemailcode.com/email-enhancements/faux-absolute-position.html。 我希望它有所帮助。