我遇到一个问题，我可以在表格行上看到一些我不需要的神秘填充/边距，但无法删除。
请参阅下面用蓝色框突出显示的区域的屏幕截图:
代码在这里:
https://codepen.io/mattsmith/pen/GWZNVN
我尝试了很多东西，例如 margin: 0、border-spacing: 0、padding: 0 等。有人可以帮忙吗我在这儿吗？因为我需要蓝色框与图像齐平。
最佳答案
img 是内联元素“替换内容”，它将继承line-height，并且您将看到 line-height间距。您可以通过在父级上使用 line-height: 0; 或 font-size: 0; 或设置 display: block; 来修复此问题> 或图像上的vertical-align: top。
* {
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; */
}<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>关于html - 神秘的表行填充/边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42565848/