删除表格单元格和行之间的间距 [英] Remove spacing between table cells and rows
问题描述
我正在设计一个HTML电子邮件模板，强制我使用表格< a>。在下面的代码中，我遇到了麻烦（1）删除占位符图像下方的间距和（2）删除图像和标题之间的空间。下面是关于它在OS X 10.6.8上的Chrome 15中的外观截图：
I'm designing an HTML email template, which forces me to use tables. In the code below, I'm having trouble (1) removing the spacing below the placeholder image and (2) removing the space between the image and the caption. Here's a screenshot of how it looks in Chrome 15 on OS X 10.6.8.:
<!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>
红色边框只显示单元格的轮廓。
The red borders are there only to show the outlines of the cells. I don't want them there in the final version.
推荐答案
看起来像DOCTYPE导致图像显示为内联元素。如果我添加 display：block 到图片，问题解决了。
It looks like the DOCTYPE is causing the image to display as an inline element. If I add display: block to the image, problem solved.
这篇关于删除表格单元格和行之间的间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
