獲取表格中沒有空間的圖像

我有一個表格，其中包含另一個表格，該表格包含圖像和圖像。第一個表格具有設置的寬度和高度，但是當我在第二個表格中添加圖像時，會在頂部和底部添加更多空間。我試圖有0填充和餘量，但不起作用。獲取表格中沒有空間的圖像

的jsfiddle - https://jsfiddle.net/aphz3hga/

<body style="background-color:##EEEEEE;"> 
    <table class="body" style="margin:0 auto;"> 
     <tr> 
     <td class="center" align="center" valign="top"> 

     <center> 

      <!-- Email Content --> 
      <table style="background-color:#850038; width:600px; height:245px;"> 
       <tr> 
        <td> 
         <table style="margin:0 auto;"> 
          <tr> 
           <td> 
            <img src="http://i.imgur.com/yNPG35t.png"> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 
      </table> 



      </center> 
     </td> 
     </tr> 
    </table> 
    </body> 
</html>

來源

2016-02-28 Ralphunreal

請適當修改您的提琴。將鼠標光標置於HTML區域內，按Enter鍵，然後根據顯示的消息對其進行編輯：http://imgur.com/vPe2XbJ –

也請注意，不建議使用'

'標記。用CSS代替東西。 – Aziz

您需要將這些樣式：

默認表（細胞）由2像素具有獨立的邊界。 border-collapse: collapse;刪除此空間。

table { 
    border-collapse: collapse; 
}

此外，單元格有1px的填充。我們也刪除它。

table td { 
    padding: 0; 
}

而且，img元件是內聯的元素和它們有一定的空間（餘量或填充），其不DevTools顯示。將圖像的顯示設置爲阻止解決該問題。

img { 
    display: block; 
}

JSFiddle

來源

2016-02-28 21:04:44 akinuri

獲取表格中沒有空間的圖像

回答

相關問題