Remove spacing between table cells and rows

问题

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.

回答1:

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.

回答2:

Add border-collapse: collapse into the style attribute value of the inner table element. You could alternatively add the attribute cellspacing=0 there, but then you would have a double border between the cells.

I.e.:

<table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px; border-collapse: collapse">

回答3:

You have cellspacing="0" twice, try replacing the second one with cellpadding="0" instead.

回答4:

I had a similar problem. This helps me across main email clients. Add:

attributes cellpadding="0", cellspacing="0" and border="0" to tables
style border-collapse: collapse; to tables
styles padding: 0; margin: 0; to each element
and styles font-size: 0px; line-height: 0px; to each element which is empty

回答5:

Nothing has worked. The solution for the issue is.

<style>
table td {
    padding: 0;
}
</style>

回答6:

Used font-size:0 in parent TD which has the image.

回答7:

I had a similar problem and I solved it by (inline)styling the td element as follows :

<td style="display: block;">

This will work although its not the best practice. In my case I was working on a old template that had been styled using HTML tables.

回答8:

Hi as @andrew mentioned make cellpadding = 0, you still might have some space as you are using table border=1.

回答9:

Put display:block on the css for the cell, and valign="top" that should do the trick

回答10:

If the caption box is gray then you can try wrapping the image and the caption in a div with the same background color of gray---so a "div" tag before the "tr" tag...This will mask the gap because instead of being white, it will be gray and look like part of the gray caption.

来源：https://stackoverflow.com/questions/8479090/remove-spacing-between-table-cells-and-rows

标签

css

html-table

html-email