Question

我在gmail的桌面上遇到填充问题。非常感激任何的帮助。请记住，这是一封gmail电子邮件，因此所有css都必须内联。谢谢！

在具有适当填充的组合消息中看起来像这样：

然后它似乎删除了实际电子邮件中表格中的填充：

这是带有td元素填充的代码片段：

<td background="http://timshoemake.io/wp-content/uploads/email-template/prowler3.png" style="line-height:10px; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;padding-top:40px !important;padding-right:30px !important;padding-bottom:20px !important;padding-left:30px !important; background-image:url('http://timshoemake.io/wp-content/uploads/email-template/prowler3.png'); background-size: cover; -webkit-background-size: cover; -moz-background-size: cover -o-background-size: cover; background-position: center; background-repeat: no-repeat;">

代码：

 <table style="max-width: 600px;" align="center" cellpadding="0" cellspacing="0" border="0" >
            <tr>
                <td background="http://timshoemake.io/wp-content/uploads/email-template/prowler3.png" style="line-height:10px; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;padding-top:40px !important;padding-right:30px !important;padding-bottom:20px !important;padding-left:30px !important; background-image:url('http://timshoemake.io/wp-content/uploads/email-template/prowler3.png'); background-size: cover; -webkit-background-size: cover; -moz-background-size: cover -o-background-size: cover; background-position: center; background-repeat: no-repeat;">

                <table width="70" align="left" border="0" cellpadding="0" cellspacing="0" >
                    <tr>
                        <td height="70" style="padding: 0 20px 20px 0;">
                            <img src="http://timshoemake.io/wp-content/uploads/email-template/shoemaker_repair_blue@2x-2.png"  style="height: auto; "width="70" height="70" border="0" alt="" / >
                        </td>
                        <td>
                            <!--[if (gte mso 9)|(IE)]>
                            <table width="425" align="left" cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td>
                                    <![endif]-->
                                        <table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 425px!important; width: 100%; max-width: 425px;">
                                            <tr>
                                                <td height="70">
                                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                        <td style="font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px; padding: 0 0 0 3px;">
                                                            CREATING
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td style="font-size: 33px; line-height: 38px; font-weight: bold; color: #ffffff; padding: 5px 0 0 0;">
                                                            Beautiful Fitness Web Design
                                                        </td>
                                                    </tr>
                                                </table>
                                                </td>
                                            </tr>
                                        </table>
                                    <!--[if (gte mso 9)|(IE)]>
                                    </td>
                                </tr>
                            </table>
                            <![endif]-->
                        </td>
                    </tr>
                </table>
                </td>
            </tr>
              </table>

Answer 1

我只能说，这真是一场噩梦。我必须创建td空间块并完全取出填充。这是完成的代码，遗憾的是我没有时间进行编辑，因此您可以使用工具进行比较。

成品，经过约2小时的工作：

<table style="width: 600px;" align="center" cellpadding="0" cellspacing="0" border="0" >
                <tr>
                    <td background="http://timshoemake.io/wp-content/uploads/email-template/prowler3.png"  style="line-height:10px; background-image:url('http://timshoemake.io/wp-content/uploads/email-template/prowler3.png'); background-size: cover; -webkit-background-size: cover; -moz-background-size: cover -o-background-size: cover; background-position: center; background-repeat: no-repeat;" >

                    <table width="70" align="left" border="0" cellpadding="0" cellspacing="0" >
                        <tr>
                            <td width="40px"> &nbsp;&nbsp;&nbsp;&nbsp; </td>
                            <td height="70" style="padding: 0 20px 20px 0;">
                                <img src="http://timshoemake.io/wp-content/uploads/email-template/shoemaker_repair_blue@2x-2.png"  style="height: auto; "width="70" height="70" border="0" alt="" / >
                            </td>
                            <td>
                                <!--[if (gte mso 9)|(IE)]>
                                <table width="425" align="left" cellpadding="0" cellspacing="0" border="0">
                                    <tr>
                                        <td>
                                        <![endif]-->
                                            <table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 425px; width: 100%; max-width: 425px;">

                                                <!-- top padding -->
                                                <tr>
                                                    <td width="600px" height="40px"></td>
                                                </tr>

                                                <!-- header content -->
                                                <tr>
                                                    <td height="70">
                                                    <table width="425px" border="0" cellspacing="0" cellpadding="0" style="font-family: 'Raleway', Helvetica, Arial, sans-serif;" >
                                                        <tr>

                                                            <td style="font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px; padding: 0 0 0 3px;">
                                                                Creating
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td style="font-size: 30px; line-height: 38px; font-weight: bold; color: #ffffff; padding: 5px 0 0 0;">
                                                                Beautiful Fitness Web Design
                                                            </td>
                                                            <!-- <td width="20px"></td> -->
                                                        </tr>
                                                    </table>
                                                    </td>
                                                </tr>

                                                <!-- bottom padding -->
                                                <tr>
                                                    <td width="600px" height="40px"></td>

                                                </tr>
                                            </table>
                            </td>
                                        <!--[if (gte mso 9)|(IE)]>
                                        </td>
                                    </tr>
                                </table>
                                <![endif]-->
                        </tr>
                    </table>
                    </td>
                </tr>
</table>

在实际电子邮件

1 个答案: