Search code examples
html-tablehtml-emailspacingcampaign-monitor

Using Campaign Monitor to send emails, is there any way to get rid of the 5px white space above text in a vertical-align table?

Sending out mass emails, pretty much the whole thing is inside tables.

CSS affecting the table:

.title  {
vertical-align: top;
}

HTML:

<table width="580" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="title" align="left" width="440" valign="top">
<h2><singleline label="Title">Enter your title</singleline></h2>
<p><multiline label="Description">Description</multiline></p>


</td>

<td align="left" valign="top" width="20"><img src="/images/00.gif" height="1" width="20" border="0"></td>

<td align="left" valign="top" width="120"><img src="/images/001.jpg" editable="true" label="Image" width="120" border="0"></td>
</tr>
<tr>
<td colspan="3" align="left" valign="top" width="580"><img src="/images/00.gif" height="20" width="1" border="0"></td>
</tr>
</table>

I need the text inside the tag to be flush with the top of the table. Currently the /images/001/jpg is flush, but the text is 5 pixels below the edge of the table.

I'm using vertical-align: top in the CSS, have tried border-spacing: none, border-collapse: collapse, and border: none. None of them solved the problem.

Using margin-top: -5px; on the tag solved the problem in standard browser testing, but wasn't supported by some email clients.

Solution

  • this is Ros from Campaign Monitor. What isn't entirely obvious is that the <singleline> and <multiline> tags convert into <p>your content</p>

    ...when imported into the Campaign Monitor editor. It's these <p> tags that are creating this extra padding - here's an example.

    The easiest way to avoid this is to add p { margin: 0; padding: 0; } to your CSS styles.

    Hopefully this fixes this issue for you. Note that we have a forum for answering questions like this, so feel free to post your template code there in the future.

    Many thanks to everyone who contributed here!