Gmail adding in big space above text

I'm having the damnest time testing a newsletter, everything looks fine as wine (to my standards) in every browser and email client except Gmail.

In Gmail, my bold text gets disaligned and pushed down by an invisible space.  I've simplified my newsletter down to the core problem below.  After weeks of research, all I know is that using "h3{ font-family:Arial, sans-serif; color:#000; font-size:16px; }" on my text in Gmail comes with the price of a big padding/border above whatever I write.

Help me Campaign Monitor Forums, you're my only hope.

 <html lang="en">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Versatile Newsletter v2- Template no. 1</title>
        <style type="text/css">
        /* general styling */
        table   /* this is the default font size, family and color for the whole newsletter  */
            font-family:Arial, sans-serif; 
        h1{ font-family:Arial, sans-serif; color:#000; font-size:22px; }
        h2{ font-family:Arial, sans-serif; color:#000; font-size:18px; }
        h3{ font-family:Arial, sans-serif; color:#000; font-size:16px; }
        a{ color:#2A5DB0; }
        b{ color:#515151; }
        ul{ margin-left:0; padding-left:0; padding-left:16px; }
        ol{ margin-left:0; padding-left:0; padding-left:25px; }
        /* custom classes */
        .shout{ color:#FF0000; }
        .silence{ color:#515151; font-weight:400; }
        .text-align-center{ text-align:center; }
        .text-align-right{ text-align:right; }
        .img-left-aligned{ margin-right:20px; margin-top:0px; margin-bottom:5px; margin-top:5px; }
        .img-right-aligned{ margin-left:20px; margin-top:0px; margin-bottom:5px; margin-top:5px; }
        .bordered-bottom{ border-bottom:1px solid #d6d6d6; }
        .bordered-bottom-left{ border-bottom:1px solid #d6d6d6; border-left:1px solid #d6d6d6; }
        /* top */
        .view-mobile-browser{ line-height:4px; font-size:11px; }
            .view-mobile-browser a{ color:#515151; }
        .ourwebsite{ line-height:4px; font-size:11px; }
            .ourwebsite a{ font-weight:bold; }
            .menu-or-slogan a{ color:#515151; text-decoration:underline; }
        /* content */
        .main-content-wrap{ border-width: 1px 1px 1px 1px; border-spacing: 0px; border-style: none; 
                            border-color: #d6d6d6 #d6d6d6 #d6d6d6 #d6d6d6; border-collapse: collapse; background-color: #ffffff; }
        /* bottom */
            .companyinfo a{}
            .subscription a{}
        .social{ border-top:1px solid #D0D0D0; border-bottom:1px solid #D0D0D0; }
            .social a{ color:#515151; text-decoration:none; }
            .copyright a{ color:#565656; text-decoration:none; }
    <body marginwidth="0" marginheight="0" bgcolor="#515151" background="images/bg.png" leftmargin="0" topmargin="0" offset="0">
        <!-- wrapper table - needed as some readers strip the <html>, <head> and <body> tags -->
        <table width="100%" cellspacing="0" cellpadding="0" bgcolor="#515151" background="">
                    <td><!-- ///////////////////////////////////// Newsletter Content  ///////////////////////////////////// -->
                    <div style="text-align: center; width: 600px; margin-left: auto; margin-right: auto;"><center><img width="600" height="89" border="0" alt="" src="" /></a>
                    <table width="600" rules="none" frame="border" cellspacing="0" cellpadding="0" bordercolor="#d6d6d6" border="0" bgcolor="#ffffff" align="center" class="main-content-wrap">
                                <td><img width="600" height="20" src="" style="display: block;" alt="" />      <!-- START MAIN CONTENT. ADD MODULES BELOW -->             <!-- Module #1 | 1 col, 540px --><!-- Module #5 | 2 columns, 166px, 20px spacer, 352px  -->
                                <table width="540" cellspacing="0" cellpadding="0" align="center">
                                            <td width="166" valign="top"><img width="294" height="185" src="" style="display: block;" alt="" /></td>
                                            <td width="20"><img width="20" height="20" src="" alt="" /></td>
                                            <!-- spacer column -->
                                            <td width="352" valign="top">
                                            <h3 style="display: block;">SAMPLE TITLE</h3>
                                            <p>No matter what I do, when this sends to Gmail, there is always a huge space added above the words "SAMPLE TITLE" above! "Sample Title" should remain even with the image to the left.</p>
                                <!-- End Module #5 -->                            
                                            <img alt="" style="width: 600px; height: 18px;" src="" />                  <!-- END SOCIAL + COMPANY INFO + SUBSCRIPTION --></td>
fyredefyre fyredefyre, 5 years ago

You'll find that heading tags have their own margin/padding inbuilt, so your best bet is to set margin/padding to zero. If it's still not working, try a custom class instead. - Everything Email.
Email: Skype: fyredefyre
danjab, 5 years ago

Already tried setting them to zero.  What is a custom class, can you give an example?

fyredefyre fyredefyre, 5 years ago

Instead of using a <h2> set a style class such as .heading1 { css-properties here } and a standard class="heading1"> - Everything Email.
Email: Skype: fyredefyre

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free