文本元素中的无意填充

我根据客户的设计请求使用表格。（阅读：没有其他的选择）文本元素中的无意填充

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

（请注意，我只在看垂直填充，而不是靠右侧这仅仅是细胞大小的结果）

来源

2013-08-19 J S

你是否以CSS重置开始？（我敢打赌不是） –

你已经让他们成为一个宽度，但没有集中文本。将'text-align：center'添加到你的td – Prisoner

@Diodeus是的，但它发生有或没有重置。 –

我假设的原因你使用内联样式是因为你正在做一个电子邮件。尝试去除这些子元素上的tr高度，并设置span s的线高。以下是更新的小提琴：http://jsfiddle.net/EMtxu/2/

来源

2013-08-19 19:44:46

完美。我会接受什么时候会让我，谢谢！ –

太棒了！我很高兴它的工作！：d –

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

行高。你的大“50”有一个与它相关的行高，允许上行/下行（例如小写字母“p”的部分低于基线）。在这种情况下，这意味着在“50”以下有额外的空间。
连续的所有TD都是相同的高度，所以第二个TD将调整到与第一个TD一样深，从而也会在那里产生额外的空间。

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

来源

2013-08-19 19:46:47

文本元素中的无意填充

回答

相关问题