Question

我根据客户的设计要求使用表格。（阅读：没有其他选择）

所有表格单元格似乎都在应用某种垂直填充并拧紧所有间距。我已经改变了小提琴上其中一个单元格的文字/背景颜色，告诉你我的意思。我尝试在所有适用的元素上设置margin和padding为0。

感谢您的帮助！

    <table width="346" border="0" cellpadding="0" cellspacing="0">
        <tr height="66">
        <td width="85" style="padding:0;" align="left" valign="top">
            <span style="font-size:66px;font-weight:bold;line-height:50ox;">50</span>
        </td>
        <td width="50" align="left" valign="middle">
            <table border="0" cellpadding="0" cellspacing="0">
                <tr height="30">
                    <td width="50" align="center" valign="bottom">
                        <span style="font-size:28px;font-weight:bold;">%</span>
                    </td>
                </tr>
                <tr height="20">
                    <td width="50" align="center" valign="bottom">
                        <span style="font-size:28px;font-weight:bold;">OFF</span>
                    </td>
                </tr>
            </table>
        </td>
        <td width="211"></td>
    </tr>
</table>

JSFiddle：http://jsfiddle.net/EMtxu/

（请注意，我只是看垂直填充，而不是右侧，这只是单元格大小的结果）

Answer 1

我假设您使用内联样式的原因是因为您正在发送电子邮件。尝试删除这些子元素的tr高度，并为span设置行高。这是更新的小提琴：http://jsfiddle.net/EMtxu/2/

Answer 2

我认为你所看到的是两件事的组合：

行高。你的大“50”有一个与它相关的行高，允许上升/下行（就像小写“p”的部分下降到基线以下）。在这种情况下，这意味着“50”以下的额外空间。
连续的所有TD都是相同的高度，因此第二个TD调整为与第一个TD一样深，从而产生额外的空间。

解决方案：在“50”上设置一个小于或等于字体大小的硬线高度。

文本元素中的无意填充

2 个答案: