如何让Outlook中子元素margin区域继承父元素而非body的背景色

你提供的HTML代码在标准浏览器中渲染时，#child元素的margin区域会显示父元素#parent的灰色背景，但在Windows桌面版Outlook中打开时，该margin区域会透出<body>的背景色，这是Outlook渲染引擎的固有特性导致的。

Windows桌面版Outlook采用Microsoft Word作为HTML渲染内核，对W3C标准盒模型的支持存在诸多差异：子元素的外边距（margin）区域不会被父元素的背景填充，会直接透出更上层容器的背景，和标准浏览器的渲染逻辑不一致。

以下方案可实现Outlook和标准浏览器的渲染效果一致：

• 方案1：使用padding替换margin实现间距
  不要给子元素#child设置margin，将需要的间距改为父元素对应位置的padding，或者给#child额外套一层背景和#parent一致的容器，将原来的margin改为该外层容器的padding即可。
  修改后的代码示例：

  <!DOCTYPE html>
  <html lang="en">
  <head>
  </head>
  <body>
  <div style="background-color: grey" id="parent">
    <div style="background-color: red">
      content
    </div>
    <!-- 新增外层容器，用padding替代原来的margin，背景和父元素一致 -->
    <div style="padding: 10px; background-color: grey">
      <div style="padding: 10px; background-color: yellow" id="child">margin and padding</div>
    </div>
    <div style="background-color: aquamarine">
      aquamarine
    </div>
  </div>
  </body>
  </html>
  

• 方案2：高兼容场景优先使用表格布局
  对于HTML邮件场景，<table>元素的盒模型属性在Outlook中的兼容性远好于div，可改用表格结构实现相同布局，用单元格的padding控制间距，不会出现背景透出问题。

提示：HTML邮件开发中建议尽量避免使用margin实现垂直间距，Outlook对margin的支持度较低，优先选择padding实现间距效果可避免绝大多数兼容性问题。

内容的提问来源于stack exchange，提问作者Dónal