从 HTML 电子邮件中删除默认的 Android 填充答案

【问题标题】：Remove default Android padding from HTML emails从 HTML 电子邮件中删除默认的 Android 填充
【发布时间】：2016-10-23 10:28:16
【问题描述】：

我有一个响应式电子邮件布局，其中一些元素会拉伸视口的整个宽度，无论是什么。

在 Android 中（至少 4.4 上的本机邮件和 Gmail 应用程序）两侧似乎有 ~10px 的填充。是否有任何属性或技巧可以否定这一点？

（我觉得这个问题应该已经在某个地方问过了，但搜索只提供完全不相关的 HTML 电子邮件边距问题，如果这是重复的，请见谅）。

试过

取消正文边距。这影响了布局，但没有解决问题。以下代码的结果只是删除了左侧的填充，但在本机应用程序中将右侧的填充加倍。

html, body{
    padding:0 !important;
    margin:0 !important;
    width:100% !important;
}
div[style*="margin: 16px 0"] { 
    margin:0 !important; 
    font-size:100% !important; 
    width:100% !important; 
}

Gmail 应用没有变化。

更多见解

无论宽度设置如何，主体在视口中的宽度似乎都保持不变。如果您将宽度设置为 1000 像素，则电子邮件会缩小以适合两侧边距的区域。可以在 body 上使用 margin:0 取消边距，但 body 保持相同的大小，导致右侧出现额外的空间。

我相信客户正在以编程方式调整电子邮件的大小以适应给定的宽度。解决这个问题的唯一方法可能是以某种方式“欺骗”客户。似乎还没有任何效果...

【问题讨论】：

标签： android html css email

【解决方案1】：

问题只是边距，Android 4.4 电子邮件客户端在所有侧面都应用了边距值（但它实际上在右侧不可见），因此即使在您的电子邮件被呈现之前，它已经与整体视口混淆了。

您可以通过以下块对其进行规范化。

body { margin:0 !important; }
div[style*="margin: 16px 0"] { margin:0 !important; font-size:100% !important; }

https://blog.jmwhite.co.uk/2015/09/19/revealing-why-emails-appear-off-centre-in-android-4-4-kitkat/

【讨论】：

我无法让它工作，似乎没有任何改变。我也没有看到他们描述的“偏离中心”问题。也许这种方法是对旧错误的错误修复？
让它做点什么，但实际上并没有让它变得更好。查看更新后的帖子。

【解决方案2】：

问题在于最外层 div 的左右填充。

因此，请创建一个比您的内容 div 更宽的包装 div，并将您的内容 div 居中。例如，我的内容 div 是 350px 宽，而我的包装器 div 是 450px。这将我的内容 div 完美居中，每边都有我想要的 50px，这是我无法通过填充实现的。这基本上模仿了我所追求的 50px 左右填充。

对于顶部和底部填充，Gmail 没有问题。所以对于我的 div 的顶部和底部，我可以只使用填充。

希望这可以帮助像我一样陷入困境的人。

【讨论】：