如何使覆蓋其內容的高度

我最近在練習HTML電子郵件，並且使用表格時遇到了一些麻煩。目前，<td>的內容大於<td>本身。如何使覆蓋其內容的高度

那麼如何讓td根據其內容調整其大小呢？我覺得這封電子郵件的td的其餘部分工作得很好。請注意，給我帶來麻煩的是一個<a>，我已經給它一些填充以作爲按鈕樣式。

<table border="0" cellpadding="0" cellspacing="0"> 
 
    <tr> 
 
    <td style="width: 45%;"> 
 
     <table border="1" cellspacing="0" cellpadding="0" style="padding: 10px 10px 10px 10px;"> 
 
     <tr> 
 
      <td> 
 
      <img src="house1.jpg" width="300" height="200"> 
 
      </td> 
 
     </tr> 
 

 
     <tr> 
 
      <td align="center"> 
 
      <h6 style="font-size: 16px; font-weight: 900; margin: 0; padding: 10px 10px 10px 10px;">Modern House of such style</h6> 
 

 
      <p style="font-size: 14px; font-weight: 400; margin: 0; padding: 0 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis.</p> 
 
      </td> 
 
     </tr> 
 

 
     <tr> 
 
      <td align="center"> 
 
      <a href="#" style="text-decoration: none; color: #ffffff; display:inline-block; padding: 10px 20px 10px 20px; background-color: #f95965">CLICK HERE</a> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
</table>

這最後td是一個給我一些麻煩。有任何想法嗎？

來源

2017-02-23 Óscar Aguayo

問題不在於你的'td'，那就是默認了''元素是'inline'所以不要像塊元素一樣採用填充屬性。添加'display：inline-block;'到你的'a'元素 – haxxxton

完成，工作。非常感謝你。 –

使用Display屬性像display:block;或display:inline-block檢查這個例子內容

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Page Title</title> 
 
</head> 
 
<body> 
 
<table border="0" cellpadding="0" cellspacing="0"> 
 
    <tr> 
 
    <td style="width: 45%;"> 
 
\t <table border="1" cellspacing="0" cellpadding="0" style="padding: 10px 10px 10px 10px;"> 
 
\t <tr> 
 
\t <td> 
 
\t <img src="house1.jpg" width="300" height="200"> 
 
\t </td> 
 
\t </tr> 
 

 
\t <tr> 
 
\t <td align="center"> 
 
\t <h6 style="font-size: 16px; font-weight: 900; margin: 0; padding: 10px 10px 10px 10px;">Modern House of such style</h6> 
 
      <p style="font-size: 14px; font-weight: 400; margin: 0; padding: 0 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis.</p> 
 
\t </td> 
 
\t </tr> 
 

 
\t <tr> 
 
\t <td align="center"> 
 
\t <a href="#" style="text-decoration: none; color: #ffffff; padding: 10px 20px 10px 20px; background-color: #f95965;display: inline-block;">CLICK HERE</a> 
 
\t </td> 
 
\t </tr> 
 
        
 
</body> 
 
</html>

來源

2017-02-23 04:49:40

如何使​​覆蓋其內容的高度

回答

相關問題

如何使覆蓋其內容的高度