文本元素中的無意填充

我根據客戶的設計請求使用表格。（閱讀：沒有其他的選擇）文本元素中的無意填充

所有表格單元格似乎應用某種垂直填充和擰緊我所有的間距。我已經改變了小提琴上的一個單元格的文本/背景顏色，以向我展示我的意思。我已經嘗試在所有適用的元素上設置邊距和填充爲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

文本元素中的無意填充

回答

相關問題