HTML电子邮件中的奇数空格

时间:2014-07-15 14:25:09

标签: html css email spacing

我正在为我公司正在进行的营销制作HTML电子邮件。我不能为我的生活弄清楚我桌子底部的空白。我有嵌套表作为所有电子邮件客户端的优化协议。我不能使用疯狂的CSS,必须是内联或嵌入式(我的平台将运行嵌入式css内联。

我的代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Laser Vision Care Center Wants To Help You See More Clearly</title>

<style type="text/css">

    table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 0;
        background:#d7bd83;



    }


</style>

</head>

<body>  
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" style="background:#e6cc89;color:#fff;font-family:Arial, Helvetica, sans-serif; font-size:12px">

        <tr cellpadding="0" cellspacing="0">
            <td cellpadding="0" cellspacing="0">
            </td>
            <tr cellpadding="0" cellspacing="0">
                <td cellpadding="0" cellspacing="0" valign="middle" style="background:#e0c788;text-align:center;font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;color:#222961;font-weight:Bold;font-size:20px">"Our Focus Is On The Health Of Your Eyes"</td>
                </tr>
                <tr cellpadding="0" cellspacing="0">
                    <td width="600" cellpadding="0" cellspacing="0">
                        <img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/BannerImage.jpg">
                    </td>
                </tr>
                <tr cellpadding="0" cellspacing="0">
                    <td cellpadding="0" cellspacing="0">
                        <table width="600" cellpadding="0" cellspacing="0">
                            <tr cellpadding="0" cellspacing="0">
                                <td cellpadding="0" cellspacing="0" width="232">
                                    <img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/ArrowTop.jpg">
                                </td>
                                <td cellpadding="0" cellspacing="0" width="368" align="right" style="background:#e6cc89;"><p><span style="font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;font-weight:400;font-size:22px;color:#6f6f6f;margin-right:20px;">WAKE UP TO CLEAR VISION WITH</span><br>
<span style="font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;font-weight:400;font-size:27px;color:#6f6f6f;margin-right:20px;">ALL LASER CUSTOM LASIK</span></p>

                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            <tr>
                    <td cellpadding="0" cellspacing="0">
                        <table width="600" cellpadding="0" cellspacing="0">
                            <tr>
                                <td cellpadding="0" cellspacing="0" width="232">
                                    <img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/ArrowSecond.jpg">
                                </td>
                                <td cellpadding="0" cellspacing="0" width="368">
                                    <img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/ClickHere.jpg">

                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            <tr>
                <td cellpadding="0" cellspacing="0">
                    <table width="600" cellpadding="0" cellspacing="0">
                        <tr cellpadding="0" cellspacing="0" style="background:#e6cc89;">
                            <td cellpadding="0" cellspacing="0" width="231">
                                <img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/ArrowThird.jpg">
                            </td>
                            <td cellpadding="0" valign="top" cellspacing="0" width="369" align="right" style="top-margin:0;"><a href="tel:1-313-724-2733" style="text-decoration:none;"><span style="font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;font-weight:400;font-size:31px;color:#3d3e3e;">or call (313) 724-2733</span></a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        <tr cellpadding="0" cellspacing="0">
            <td width="600" cellpadding="0" cellspacing="0">
                <img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/ArrowFouth.jpg">
            </td>
        </tr>
        <tr>
                <td cellpadding="0" cellspacing="0">
                    <table cellpadding="0" cellspacing="0">
                        <tr cellpadding="0" cellspacing="0" style="background:#e6cc89;">
                            <td cellpadding="0" cellspacing="0" width="222" align="left">
                                <img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/ArrowFifth.jpg">
                            </td>
                        </tr>
                    </table>
                    <tr cellpadding="0" cellspacing="0">
                        <td width="600" align="center">
                            <table cellpadding="0" cellspacing="15">
                                <tr>
                                <td width="41">
                                    <a href="#"><img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/Facebook.jpg"></a>
                                </td>
                                <td width="40" cellpadding="0" cellspacing="0">
                                    <a href="#"><img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/Twitter.jpg"></a>
                                </td>
                                <td width="41" cellpadding="0" cellspacing="0">
                                    <a href="#"><img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/Instagram.jpg"></a>
                                </td>
                                </tr>
                            </table>
                            <tr cellpadding="0" cellspacing="0">
                                <td cellpadding="0" cellspacing="0" style="text-align:center;">
                                    <a href="http://www.lvccenter.com" style="text-decoration:none;"><span style="font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;text-weight:400;font-size:12px;color:#6f6f6f;">www.lvccenter.com</span></a>
                                </td>
                            </tr>
                            <tr>
                                <td cellpadding="0" cellspacing="0" style="text-align:center;">
                                    <p><span style="font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;text-weight:400;font-size:10px;color:#6f6f6f;">23522 Michigan Avenue Dearborn, MI 48124</span></p>
                                </td>
                            </tr>






    </table>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

您的第一个差距是因为您的p个代码之一使用默认边距。让<p style="margin:0;">修复它(#47行)。

第二个差距是因为你有两个不同高度的图像:ArrowSecond.jpg是73px,而ClickHere.jpg是74px。您需要使它们匹配才能使表格行对齐。

P.S。:您的HTML需要一些小修复。尝试将其提供给html验证器。

P.S.2:单词&#34; WAKE&#34;和&#34;所有&#34;没有垂直排列。