html - 删除嵌套表之间的空间

我正在使用HTML,尽可能多的内联CSS和一些CSS处理响应新闻稿。

我在设计中遇到问题,因为我无法删除第一张图片和第二张图片后的表格之间的空间。

https://codepen.io/KGuide/full/oNXwyEW

 html,
        body {
            margin: 0 auto !important;
            padding: 0 !important;
            height: 100% !important;
            width: 100% !important;
            background: #fff;
        }
        
        /* What it does: Stops email clients resizing small text. */
        * {
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }
        table,
        td {
            mso-table-lspace: 0pt !important;
            mso-table-rspace: 0pt !important;
        }
        
        /* What it does: Fixes webkit padding issue. */
        table {
            border-spacing: 0 !important;
            border-collapse: collapse !important;
            table-layout: fixed !important;
            margin: 0 auto !important;
        }
        
        /* What it does: Uses a better rendering method when resizing images in IE. */
        img {
           /* -ms-interpolation-mode:bicubic; */
        	
        }
        a {
            text-decoration: none;
        }
          .primary{
        	background: #f5564e;
        }
        .bg_white{
        	background: #ffffff;
        }
        .bg_light{
        	background: #fafafa;
        }
        .bg_black{
        	background: #000000;
        }
        .bg_dark{
        	background: rgba(0,0,0,.8);
        }
        .email-section{
        	padding:2.5em;
        }
        
        /*BUTTON*/
        .btn{
        	padding: 5px 15px;
        	display: inline-block;
        }
        .btn.btn-primary{
        	border-radius: 5px;
        	background: #f5564e;
        	color: #ffffff;
        }
        .btn.btn-white{
        	border-radius: 5px;
        	background: #ffffff;
        	color: #000000;
        }
        .btn.btn-white-outline{
        	border-radius: 5px;
        	background: transparent;
        	border: 1px solid #fff;
        	color: #fff;
        }
        
        h1,h2,h3,h4,h5,h6{
        	font-family: 'Nunito Sans', sans-serif;
        	color: #000000;
        	margin-top: 0;
        }
        
        body{
        	font-family: 'Nunito Sans', sans-serif;
        	font-weight: 400;
        	font-size: 15px;
        	line-height: 1.8;
        	color: rgba(0,0,0,.4);
        }
        
        a{
        	color: #f5564e;
        }
        
        table{
        }
        /*LOGO*/
        
        .logo h1{
        	margin: 0;
        }
        .logo h1 a{
        	color: #000;
        	font-size: 20px;
        	font-weight: 700;
        	text-transform: uppercase;
        	font-family: 'Nunito Sans', sans-serif;
        }
        
        .navigation{
        	padding: 0;
        }
        .navigation li{
        	list-style: none;
        	display: inline-block;;
        	margin-left: 5px;
        	font-size: 12px;
        	font-weight: 700;
        	text-transform: uppercase;
        }
        .navigation li a{
        	color: rgba(0,0,0,.6);
        }
        
        /*HERO*/
        .hero{
        	position: relative;
        	z-index: 0;
        }
        .hero .overlay{
        	position: absolute;
        	top: 0;
        	left: 0;
        	right: 0;
        	bottom: 0;
        	content: '';
        	width: 100%;
        	background: #000000;
        	z-index: -1;
        	opacity: .3;
        }
        .hero .icon{
        }
        .hero .icon a{
        	display: block;
        	width: 60px;
        	margin: 0 auto;
        }
        .hero .text{
        	color: rgba(255,255,255,.8);
        	padding: 0 4em;
        }
        .hero .text h2{
        	color: #ffffff;
        	font-size: 40px;
        	margin-bottom: 0;
        	line-height: 1.2;
        	font-weight: 900;
        }
        
        
        /*HEADING SECTION*/
        .heading-section{
        }
        .heading-section h2{
        	color: #000000;
        	font-size: 24px;
        	margin-top: 0;
        	line-height: 1.4;
        	font-weight: 700;
        }
        .heading-section .subheading{
        	margin-bottom: 20px !important;
        	display: inline-block;
        	font-size: 13px;
        	text-transform: uppercase;
        	letter-spacing: 2px;
        	color: rgba(0,0,0,.4);
        	position: relative;
        }
        .heading-section .subheading::after{
        	position: absolute;
        	left: 0;
        	right: 0;
        	bottom: -10px;
        	content: '';
        	width: 100%;
        	height: 2px;
        	background: #f5564e;
        	margin: 0 auto;
        }
        
        .heading-section-white{
        	color: rgba(255,255,255,.8);
        }
        .heading-section-white h2{
        	font-family: 
        	line-height: 1;
        	padding-bottom: 0;
        }
        .heading-section-white h2{
        	color: #ffffff;
        }
        .heading-section-white .subheading{
        	margin-bottom: 0;
        	display: inline-block;
        	font-size: 13px;
        	text-transform: uppercase;
        	letter-spacing: 2px;
        	color: rgba(255,255,255,.4);
        }
        
        
        .icon{
        	text-align: center;
        }
        .icon img{
        }
        
<!DOCTYPE html>
        <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
        <head>
            <meta charset="utf-8"> <!-- utf-8 works for most cases -->
            <meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
            <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
            <meta name="x-apple-disable-message-reformatting">  <!-- Disable auto-scale in iOS 10 Mail entirely -->
            <title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
        
            <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700,800,900" rel="stylesheet">
        
            <title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
        
        </head>
        <style>
               
        
        </style>
        
        <body>
        
        <table style="width:100%; text-align:center;">
            <tr>
                <td style="width:100%; text-align:center; border-spacing: 0px;" >
                	<table align="center" style="width:100%; max-width:600px;">
                        <tr>
                            <td ><img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="width:100%; max-width: 600px;"></td>
                        </tr>
                        <tr>
                            <td class=""> 
                            	<table style="width:100%; background:#525252; max-width:600px;" border="0" cellspacing="0" cellpadding="0">
                                  <tr>
                                    <td>1</td>
                                    <td>2</td>
                                    <td>3</td>
                                  </tr>
                                  <tr>
                                    <td>1</td>
                                    <td>2</td>
                                    <td>3</td>
                                  </tr>
                                </table>
        
                            </td>
                        </tr>
                        <tr>
                            <td align="center" style="padding:15px; background:#0A0A0A;"> Move-in now to your dream home in City Center Plaza
     </td>
                        </tr>
                        <tr>
                            <td align="center" style="padding:15px; background:#0A0A0A;"> BUTTON </td>
                        </tr>
                        <tr>
                            <td style="padding:15px; background:#0A0A0A;">TEXT TEXT TEXT TEXT TEXT</td>
                        </tr>
                         <tr>
                            <td><img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="width:100%; max-width: 600px;"> </td>
                        </tr>
                         <tr>
                           <td valign="top" align="center" style="padding:15px;">
        								
        
        								
        
                                        </td>
                        </tr>
                    </table>
                    
                </td>
            </tr>
        </table>
        
        </body>
        </html>

最佳答案

以此替换您的代码,看看是否可行:

<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:100%; max-width:600px; border-collapse: collapse;">
  <tr>
    <td>
      <img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="margin: 0; border: 0; padding: 0; display: block; width:100%; max-width: 600px;">
      </td>
  </tr>

编辑:

这是他们在创建HTML电子邮件时为我提供帮助的2个教程:

Build an HTML Email Template From Scratch

How to Code a Responsive Email from Scratch