CODEWITHSUNDEEP
htmlcsshtml-email
aleejelly
aleejelly

Reputation: 73

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>

Upvotes: 0

Views: 1090

Answers (6)

Ted Goas
Ted Goas

Reputation: 7577

If all else fails, replace the <p> and <span> tags with <table> markup:

<tr>
   <td  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 </td>
</tr>
<tr>
    <td style="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.
   </td>
</tr>

Messing with the margin and display properties will work in many email clients (and maybe the ones your targeting), but using <table> tags is much safer if you want the best compatibility and don't care about the semantics of <p> and <span> tags.

Upvotes: 0

pankaj goyal
pankaj goyal

Reputation: 121

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<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="margin:0px; 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>
</table>
</body>
</html>

Upvotes: 2

dippas
dippas

Reputation: 60563

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

Upvotes: 1

cbrem
cbrem

Reputation: 9

In some browsers, <p> elements with have margins around them by default. You could try adding "margin: 0" to your <p>'s styles.

HOWEVER, be aware different email clients may vary greatly in default styles and in which parts of CSS they pay attention to (Outlook.com will ignore margins unless the 'm' at the start of 'margin' is capitalized: https://www.emailonacid.com/blog/article/email-development/outlook.com-does-support-margins). I'd recommend testing your email in a service like Litmus, which lets you see how it looks on a variety of clients.

Also, here's a handy list of which CSS features are supported by various email clients: https://www.campaignmonitor.com/css/.

Upvotes: 0

john_h
john_h

Reputation: 149

You can add a 0 margin to both the span and the p. Take a look here: 

<tr>
   <td>
      <span 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;
  margin-bottom: 0;"> 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; margin-top: 0;">Lorem ipsum dolor sit amet consectetur incididunt ut labore et dolore magna aliqua elit sed do eiusmod. </p>
   </td>
</tr>

margin-bottom: 0 on your span and margin-top: 0 on your p will remove the space.

See a fiddle here: https://jsfiddle.net/john_h/0d2tv8wp/1/

Also, since you are using table elements for an html email, make sure that you use the correct inline style formatting. http://www.w3schools.com/css/css_howto.asp

Upvotes: 0

epascarello
epascarello

Reputation: 207511

It is weird you do not use a header when you are styling a span to be a header and you have some typos in your code above.

You need to remove the default margin-top from the paragraph

td>p { margin-top: 0 }

Upvotes: 0

Related Questions