CODEWITHSUNDEEP
htmlcsshtml-email
user1212
user1212

Reputation: 951

Paragraph formatting for html emails

I have 2 consecutive paragraphs in an html email. I need to have no space between the 2 paragraphs, but I need 30px of space at the top of the 1st para and at the bottom of the second paragraph.

I can remove the spaces between the 2 paragraphs using:

p{
   padding:0;
   margin:0;
 }

For the space at the top & bottom of the para , I can use

 p{
       margin-top: 30px;
       margin-bottom: 30px;
    }

All this works fine for outlook and browsers. But when I use it for entourage (MAC email) / gmail, the space between the paragraphs is still retained.

How can I get rid of the space?

Upvotes: 0

Views: 4080

Answers (4)

RobertO
RobertO

Reputation: 2663

You can pack your paras:

<div>
  <p>top paragraph</p>
  <p>bottom paragraph</p>
</div>

And add to your CSS:

div
{
   padding: 30px 0;
}

Upvotes: 0

xkeshav
xkeshav

Reputation: 54022

try this way:

<style type="text/css">
p{background-color:green;}
div+p { margin-top:30px; }
p+p{ margin-bottom :30px; }
</style>

<div align="center"></div>
<p> first paragraph </p>
<p>Second Paragraph </p>

Working DEMO

Reference :

adjacent sibling selector

Upvotes: 0

Salman Arshad
Salman Arshad

Reputation: 272106

Most web-based email clients (hotmal, gmail) will NOT honor styles defined inside a <style> tag simply because they just discard (almost) anything defined inside the head section. You should make your styles inline.

Upvotes: 3

Ibu
Ibu

Reputation: 43810

These are the rare cases where using inline css make sense

this should be in your css

p{
   padding:0;
   margin:0;
 }

and in your inline

style='margin-top: 30px;'

there are tricks in css to make it work but i am not sure if its supported in every browsers you will have to google that.

example :

div:firstchild  p {
  ... rules..
}

will select the first child

Upvotes: 0

Related Questions