Question

我遇到了一个问题，我可以在桌面上看到一些我不需要的神秘填充/边距，但我无法移除。

请看下面用蓝色框突出显示的区域截图：

代码在这里：

我尝试了许多内容，例如margin: 0，border-spacing: 0，padding: 0等。有人可以帮助我吗？因为我需要蓝色框与图像齐平。

Answer 1

img是~~内联元素~~＆＃34;替换内容＆＃34;它会继承line-height，并且您会看到行高间距。您可以在父级上使用line-height: 0;或font-size: 0;或在图片上设置display: block;或vertical-align: top来解决此问题。

＆＃13;

* {
  font-family: Open Sans;
}

table {
  border: 1px solid #000;
}

th {
  border: 1px solid red;
  vertical-align: top;
  font-weight: normal;
}

p {
  margin: 0;
}
img.banner {
  /* or either of these */
  /* display: block; */
  /* vertical-align: top; */
}

＆＃13;

<body style="padding: 50px; background: #f7faf9">
<table style="border-collapse: collapse; margin: 0 auto; margin-top: 20px; width: 100%; max-width: 800px;">
  <tr>
    <th><img style="float: left; width: 70px" src="http://i.imgur.com/LsRs9OY.png"></th>
    <th><p style="text-align: right; font-size: 14px">February 14, 2017<br>Order <b>#4020</b></p></th>
  </tr>
  <tr>
    <th style="padding-top: 25px; line-height: 0;" colspan="2"><img style="width: 100%" class="banner" src="https://s3.amazonaws.com/zcom-media/sites/a0i0L00000QylPjQAJ/media/mediamanager/media_page_banner.jpg"></th>
  </tr>
    <tr>
    <th style="background: #35a0c6; padding-top: 25px;" colspan="2"></th>
  </tr>
</table>
</body>

＆＃13;

神秘的表行填充/边距

1 个答案: