aleejelly aleejelly - 3 months ago 11
CSS Question

Removing space between span and paragraph in email

I'm trying to write code for email, which is why I'm using tables and inline styles.

I'd like to remove the space between my

span
and
p
. I don't know why it's there in the first place.

<tr>
<td>
<span valign="top" bgcolor="#fff" class="content" style=" font-family: 'Lato',Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:700; font-size: 19px; line-height:35px; color: #654308;> Header Goes Here </span>
<p font-family: 'Lato',Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:200; font-size: 16px; color: #654308;>Lorem ipsum dolor sit amet consectetur incididunt ut labore et dolore magna aliqua elit sed do eiusmod. </p>
</td>
</tr>

Answer

To remove the space between span and p reset margin in p to 0 (p{margin:0}), since it has some margin by default. ( if you are using it to build a then apply it inline

NOTE

you have 2 errors:

  • you are missinng " in your span here: #654308;> Header

  • you are missing style attribute in p before the font-family

p {
  margin: 0
}
<table>
  <tr>
    <td>
      <span valign="top" bgcolor="#fff" class="content" style="  font-family: 'Lato',Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:700; font-size: 19px; line-height:35px; color: #654308;"> Header Goes Here </span>
      <p style="font-family: 'Lato',Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:200; font-size: 16px; line-height:22px; color: #654308;">Lorem ipsum dolor sit amet consectetur incididunt ut labore et dolore magna aliqua elit sed do eiusmod.</p>
    </td>
  </tr>
</table>


Regarding Support: Outlook.com will be the only one not supporting margin, check this for more info