Css 删除表格单元格和行之间的间距
我正在设计一个HTML电子邮件模板，它是。在下面的代码中，我遇到了以下问题：（1）删除占位符图像下方的间距；（2）删除图像和标题之间的间距。下面是一个屏幕截图，显示了它在操作系统X 10.6.8上的Chrome 15中的外观：Css 删除表格单元格和行之间的间距,css,html-table,html-email,Css,Html Table,Html Email,我正在设计一个HTML电子邮件模板，它是。在下面的代码中，我遇到了以下问题：（1）删除占位符图像下方的间距；（2）删除图像和标题之间的间距。下面是一个屏幕截图，显示了它在操作系统X 10.6.8上的Chrome 15中的外观： <!DOCTYPE HTML> <html> <head> <title>Email Template</title> <meta http-equiv="content-type" con
<!DOCTYPE HTML>
<html>
<head>
<title>Email Template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<table style="border: 1px solid #b50b32; margin: 30px auto; width: 600px; padding: 0; border-spacing: none;" cellspacing="0" cellpadding="0">
<tr>
<td id="main" style="background-color: #f2f2f2;">
<h2 style="color: #b50b32; font-family: 'Lucida Grande', Arial, sans-serif; font-size: 22px; font-weight: normal; padding: 15px; margin: 25px 0; background-color: #fff;">Major headline goes here</h2>
<table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px;">
<tr><td style="padding: 0; border: 1px solid red;"><img src="placeholder.jpg" width="180" height="130" style="border: none; margin: 0; padding: 0;" alt="Placeholder" /></td></tr>
<tr><td style="padding: 0; border: 1px solid red;"><p class="image-caption" style="background-color: #bebebe; color: #333; font-family: 'Lucida Grande', Arial, sans-serif; margin: 0; padding: 5px;">Caption.</p></td></tr>
</table><!--/.main-story-image-->
<p style="margin: 0 50px 25px 25px;">Lorem ipsum dolor sit amet.</p>
<p><a href="">Click here to read more </a></p>
<div style="clear: both;"></div>
</td><!--/#main-->
</tr>
</table>
</body>
</html>
电子邮件模板
这里是主要的标题
标题
Lorem ipsum Door sit amet
红色边框仅用于显示单元格的轮廓。我不希望它们出现在最终版本中。您有两次
cellspacing=“0”cellpadding=“0”cellpadding=0表格边框=1边框折叠：折叠到内部表格
元素的样式
属性值中。您也可以在那里添加属性cellspacting=0
，但是在单元格之间会有一个双边框
即：
看起来DOCTYPE导致图像显示为内联元素。如果我在图像中添加display:block
，问题就解决了。将display:block
放在单元格的css上，并且valign=“top”
应该会起作用的。解决这个问题的办法是
<style>
table td {
padding: 0;
}
</style>
表td{
填充：0；
}
我遇到了一个类似的问题，我通过（内联）设置td元素的样式来解决它，如下所示：
<td style="display: block;">
这将起作用，尽管它不是最佳实践。在我的例子中，我正在处理一个使用HTML表进行样式化的旧模板 在父TD
中使用了font size:0
，该父TD
具有图像。我也有类似问题。这有助于我跨越主要的电子邮件客户端。
加：
- 表的属性
cellpadding=“0”
、cellspacting=“0”
和border=“0”
- 样式<代码>边框折叠：折叠到表
- 样式<代码>填充：0；保证金：0到每个元素
- 和样式
字体大小：0px；线高：0px到每个空元素
如果标题框是灰色的，那么您可以尝试将图像和标题包装在一个具有相同灰色背景色的div中——因此在“tr”标记之前有一个“div”标记……这将掩盖间隙，因为它不是白色的，而是灰色的，看起来像灰色标题的一部分。如果您看到table class，它的边框间距为：2px；您可以在css中重写table类并设置其边框间距：0px！在表格中很重要；我喜欢这样做
table {
border-collapse: separate;
white-space: normal;
line-height: normal;
font-weight: normal;
font-size: medium;
font-style: normal;
color: -internal-quirk-inherit;
text-align: start;
border-spacing: 0px!important;
font-variant: normal; }
这救了我一命，希望能有所帮助。谢谢。我想你误解了这个问题。边框只是占位符，所以我可以看到单元格的轮廓。问题是图像下面有额外的空间，这就完成了我的技巧：display:inline block；内桌及垫料：1米；和边框：0.5px纯灰色；在td/th内部，我通过向内部表元素添加cellspacing=“0”和cellpadding=“0”解决了问题（2）。然而，第一个问题仍然存在。我不明白为什么在同一个单元格中的图像下方会有额外的像素。帮助？“边框间距：0；”在CSS中对我有效…Hello@JoeMornin，我面临同样的问题，但不同的是，在桌面tr
上正确显示，但在移动设备上显示tr
之间的间距，我尝试了这里提到的所有内容，但对我不起作用。如果你有任何想法，请分享。但如果我们在一个td内有多个图像，它会破坏这一点。谢谢！工作得很有魅力！谢谢，很好用。对许多人来说，总是建议边界塌陷：塌陷旧帖子，但为我节省了一些时间，无法找出填充的原因。Tnx！为了完整性，不建议在
元素之间放置
：在我的情况下（我想删除[empty]单元格之间的间距），只需要属性（实际上，只有cellspacting='0'）。所有的样式都没有改变，在我将属性添加到表标记之后，根本不需要任何样式。使用FF和Chrome。是的，此解决方案适用于您的情况，因为您正在解决在浏览器（而不是电子邮件客户端）中显示的HTML模板中删除单元格之间空格的问题。但是，此问题解决了删除电子邮件模板中元素之间的空格的问题，因此此问题比您的问题更复杂。观察得非常好。我没有意识到这个问题是针对电子邮件模板的。我的错。
table {
border-collapse: separate;
white-space: normal;
line-height: normal;
font-weight: normal;
font-size: medium;
font-style: normal;
color: -internal-quirk-inherit;
text-align: start;
border-spacing: 0px!important;
font-variant: normal; }