html电子邮件的100%表格宽度_Html_Css_Email_Mailchimp

html电子邮件的100%表格宽度

html css email

html电子邮件的100%表格宽度,html,css,email,mailchimp,Html,Css,Email,Mailchimp,我正在使用Mailchimp和我自己的HTML建立一个HTML电子邮件活动。我听说，要构建一封成功的HTML电子邮件，您必须专注于使用表，并使用内联CSS。我已经从我的样式中删除了所有的填充，并在边距、填充、边框和轮廓标记中添加了0度量值。有什么建议吗？我真的很坚持 <body style="background:blue; margin:0; padding:0; border:0; outline:0;"> <div id="wrap" style="background

我正在使用Mailchimp和我自己的HTML建立一个HTML电子邮件活动。我听说，要构建一封成功的HTML电子邮件，您必须专注于使用表，并使用内联CSS。我已经从我的样式中删除了所有的填充，并在边距、填充、边框和轮廓标记中添加了0度量值。有什么建议吗？我真的很坚持

<body style="background:blue; margin:0; padding:0; border:0; outline:0;">

<div id="wrap" style="background:green; width:100%;">

<table width="100%">
<tr>
  <td style="
      width:100%; margin:0; padding:0; border:0; outline:0;
      height:100px;
      background:#4b86fc;
      background-size:60px 60px;
      ">
    </td>
  </tr>
</table>

<table width="500" align="center">
<tr>
  <td style="
      padding:20px 0px 25px 0px;
      color:#000; font-family:Verdana, Geneva, sans-serif;
      font-weight:100; font-size:12px;">
      <p>Hi,</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Many Thanks, 
Liam</p></td>
  </tr>
</table>

<table width="100%">
<tr>
  <td style="
      width:100%; margin:0; padding:0; border:0; outline:0;
      background-color:#ebebeb;
      background:#ebebeb;
      border-top:1px solid #c3c3c3;
      font-family:Verdana, Geneva, sans-serif;
      font-weight:100; font-size:11px;
      text-align:center;">
        <ul style="list-style-type:none; margin:0; padding:0;">
        <li style="display:inline; padding:0 8px 0 0;"><a href="" style="text-decoration: none;     color:#545454;">Homepage</a></li>
        <li style="display:inline; padding:0 8px 0 0;"><a href="" style="text-decoration: none;     color:#545454;">Twitter</a></li>
        <li style="display:inline; padding:0 8px 0 0;"><a href="" style="text-decoration: none;     color:#545454;">Dribbble</a></li>
        <li style="display:inline; padding:0 0 0 8px;"><a href="" style="text-decoration: none;     color:#545454;">Facebook</a></li>
</ul>

</td>
</tr>
</table>

</div>

</body>


嗨
Lorem ipsum dolor sit amet
非常感谢,，
利亚姆

你试过把

margin:0;

在body-style标记中？

默认情况下，大多数浏览器都会在body标记中添加边距。所以你需要

<body style="background:blue;margin:0">

要去掉这个边距。

这将让您开始：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">
    #outlook a {padding:0;}
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
    .ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
    a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #000001 !important; pointer-events: auto; cursor: default;}
    table td {border-collapse: collapse;}
  </style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;">

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td>
     content
    </td>
  </tr>
</table>

</td></tr></table></td></tr></table></body></html>


#outlook a{填充：0；}
正文{宽度：100%！重要；-webkit文本大小调整：100%；-ms文本大小调整：100%；边距：0；填充：0；}/*强制默认字体大小*/
.ExternalClass{宽度：100%；}.ExternalClass、.ExternalClass p、.ExternalClass span、.ExternalClass字体、.ExternalClass td、.ExternalClass div{行高：100%；}/*Hotmail*/
a:活动，a:访问，a[href^=“tel”]，a[href^=“sms”]{文本装饰：无；颜色：#000001！重要；指针事件：自动；光标：默认；}
表td{边框折叠：折叠；}
内容

它的背景设置为白色（#FFFFFF），因此如果有人转发它，他们将在白色上书写。你可以把它改成任何颜色，只要记住没有人想用深色打字。内部表（与

标记在同一行）控制html区域背景色（#252525）的颜色。内容表是您的中心浮动面板

有关html电子邮件的更多信息，请参阅。

您可以在html电子邮件中为表格应用100%宽度

<强>也考虑这些事情：< /强>

1-必须在

中包含

2-应用

mso线高度规则：精确位于。
比如，

3-请避免使用
和
标签，您可以使用
或任何其他支持标签。使用&bull用于项目符号
4-使用
而不是

5-使用
而不是

6-使用嵌套表，而不是行span
或列span

转到css for mailer中的所有帮助
我喜欢这句话：“我听说要构建成功的HTML电子邮件，你需要‘像1997年一样设计’”。这个想法是从哪里来的？：）@summea：可能是微软，当时他们决定在Outlook中使用Word的渲染引擎。如果你认为IE不适合html，Word几乎可以让AdobePageMill看起来不错。我在几篇文章、博客和教程中读过类似的摘录，比如“我们不是很久以前就放弃了基于非语义表的设计吗？”？是的，现在你可以重新体验快乐了。不幸的是，大多数电子邮件客户端不支持像您习惯的那样简单的旧CSS布局。取而代之的是回到90年代，让自己熟悉手机间隔。“你有没有看过一个优秀的模板。。。HTML电子邮件！我知道这不是问题的直接答案，但我还不能发表评论，对不起。你也可以添加边距：0！重要的；在头脑里。你能描述一下你面临的问题吗？你请求帮助，但没有告诉我们问题是什么。感谢@peridot1986的回复，虽然它在像w3schools这样的HTML编辑器中工作，但在iPhone或web浏览器电子邮件应用程序中实际上不起作用。感谢@mareoraft的回复，它似乎在像w3schools这样的HTML编辑器中工作，然而，在iPhone或web浏览器的电子邮件应用程序上，它实际上不起作用。人们使用a来摆脱这些默认的格式设置。看看这些，你可以看到他们增加了保证金：0；填充：0；边界：0；大纲：0；添加到BODY和HTML标记。我希望这能起作用……虽然我的容器右侧似乎还有一些空白，但我会编辑原始问题代码，以便您能看得更清楚，谢谢@mareorafth，样板文件看起来很棒。如果查看，可以看到对于BODY标记和许多其他标记，它们正在手动设置宽度：100%。更准确地说，他们正在设置正文{width:100%！important；-webkit text size adjust:100%；-ms text size adjust:100%；margin:0；padding:0；}我要指出，Outlook忽略了margin，所以需要使用margin（大写M）。