HTML电子邮件:如何隐藏空白?

时间:2013-11-06 23:30:19

标签: html email templates fonts whitespace

我正在构建一个电子邮件模板。部分设计涉及使用Georgia Italic作为字体。该文本仅占用为文本分配的最低75%的空间。这意味着文本上方有大量的空格。

以下是代码:

<table width="660" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <table style="border-collapse: collapse;">
                <tr>
                    <td align="right" width="420" height="200" bgcolor="#FFFFFF" style="font-family: Georgia, Times New Roman, serif; font-size:300px; line-height:300px; color:#e47b5c; padding: 10px 0 10px 0; font-style:italic; line-height:300px; border-collapse:collapse;" >
                        <span>75</span>
                    </td>
                    <td align="right" valign="bottom" width="240" height="200" bgcolor="#FFFFFF" style="font-family: Georgia, Times New Roman, serif; color:#e47b5c;" >
                        <table align="left" style="border-collapse: collapse;">
                            <tr>
                                <td align="middle" style="font-size:150px; line-height:150px; color:#e47b5c; font-style:italic;">
                                    <span>%</span>
                                </td>
                            </tr>
                            <tr>
                                <td align="left" style="font-size:80px; line-height:80px; color:#e47b5c;">
                                    <span>OFF</span>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

http://jsfiddle.net/AEhy6/1/ (选择“75%”以查看额外空格)

我正在寻找掩盖空白的方法。

我怀疑唯一的方法是改变字体。欢迎所有想法!谢谢。

1 个答案:

答案 0 :(得分:1)

在您的示例中,您可以减少line-height以消除字母上方不需要的空格....