Question

我需要帮助删除表格中这些图像之间的空间。

         <tr>
            <td width="600" align="center" valign="top">
                <table cellspacing="0" cellpadding="0" width="600" style="margin: 0; padding: 0;">
                    <tr>
                        <td width="480" align="left" valign="bottom" style="background-color:#fee100; margin: 0; padding: 0;">
                               <img src="http://placehold.it/150x50" style="margin-left:25px"/>
                        </td>
                        <td width="120" style="background-color:#fee100;">
                            <img src="http://placehold.it/120x50" style="margin-right:25px; display:block">
                        </td>
                    </tr>
                </table>        
            </td>
        </tr>

正如你在小提琴中看到的，我在另一个表中使用了表，因为我想使用宽度为600px的第二个表将所有内容对齐到中心。

提前谢谢。

Answer 1

您通常需要vertical-align重置top至bottom或display或block至img td img { display:block; }。

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  font-size: 100%;
  vertical-align: baseline;
  line-height: 1.3em;
}
/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: ;
}
img {
  display:block;
  }

<body style="margin:0px; padding:0px; background-color:#ffffff;">
  <table width="100%" cellspacing="0" cellpadding="0">
    <tr>
      <td width="100%" align="center">
        <table cellspacing="0" cellpadding="0" width="600" style="margin-top:0; margin-bottom:0; margin-left:auto; margin-right:auto; padding:0;">
          <tr>
            <td width="600" align="center" valign="top">
              <table cellspacing="0" cellpadding="0" width="600" style="margin: 0; padding: 0;">
                <tr>
                  <td width="480" align="left" valign="bottom" style="background-color:#fee100; margin: 0; padding: 0;">
                    <img src="http://placehold.it/150x50" alt="PSNY" style="margin-left:25px" />
                  </td>
                  <td width="120" style="background-color:#fee100;">
                    <img src="http://placehold.it/120x50" style="margin-right:25px; display:block">
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td width="600" align="center" valign="top">
              <table cellspacing="0" cellpadding="0" width="600" style="margin: 0; padding: 0;">
                <tr>
                  <td width="150">
                    <img src="http://placehold.it/150x50" style="margin-left:25px; display:block">
                  </td>
                  <td style="margin: 0; padding: 0;">
                    <h2 style="font-family:Times New Roman, Times; font-size:24px; color:#000200; text-align: center;"><span style="border-bottom:1px solid #000200; padding-bottom: 5px;">My Title</span></h2> 

                  </td>
                  <td width="150">
                    <img src="http://placehold.it/120x50" style="margin-right:25px; float:right; display:block">
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>

{{1}}

http://jsfiddle.net/8EHED/83/

删除表格中图像之间的空间以用于电子邮件简报

1 个答案: