0

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

所有表格单元格似乎都在应用某种垂直填充并搞砸了我所有的间距。我已经更改了小提琴上一个单元格的文本/背景颜色，以向您展示我的意思。我尝试将所有适用元素的边距和填充设置为 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/

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

4

2 回答 2

1

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

于 2013-08-19T19:44:46.890 回答
0

我认为您所看到的是两件事的结合：

  1. 线高。你的大“50”有一个与之关联的行高，允许上升/下降（就像下降到基线以下的小写“p”的一部分）。在这种情况下，这意味着“50”以下的额外空间。
  2. 一行中的所有 TD 高度相同，因此第二个 TD 调整为与第一个 TD 一样深，从而导致那里也有额外的空间。

解决方法：在“50”上设置一个小于等于font-size的hard line-height。

于 2013-08-19T19:46:47.180 回答