How to adjust default margins?

Hi all,

I'd like to reduce the gaps between my headings in an email I'm designing. I *think* the issue is due to the default margins between text elements that browsers add - as the text size scales up, so does the margin around that text.

Given that margin is not well supported in email clients, what other options do I have available to adjust the spacing between my headings?

I've included my code below, in case the whole context helps with answering my question. The spacing I'd particularly like to adjust is that between the H1, H2 and the table immediately below the H2.

Thanks for your help!

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
    <meta http-equiv="Content-Type" name="robots" content="text/html; charset=utf-8" noindex; nofollow">
    <meta property="og:title" content="">
    <meta name="viewport" content="width=device-width">
    <title></title>
    <style type="text/css">
        /* Client-specific Styles */
        #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
        body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
        body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */
        /* Reset Styles */
        body{margin:0; padding:0;}
        img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
        table td{border-collapse:collapse;}
        #backgroundTable{height:100% !important; margin:0; padding:0; width:100% !important;}
        /* Smaller Screen Styles */
        @media only screen and (max-width: 480px) {
            table[id=backgroundTable]{
                width:100% !important;
            }
            table[class=contentWrapper],[class=mainWrapper], [class=contentTable]{ 
                width:100% !important;
            }
            td[class=image] img{
                height:auto !important;
                   width:100% !important;
            }
            h1, h2{
                line-height: 100%
            }
            h2{
                font-size:50px;
            }
            h3{
                line-height: 150%;
            }
        }
        /* Template Styles */
        #backgroundTable{
            background-color:#FAFAFA;
            }
        .contentTable, .mainWrapper{
            background-color:#71B7E9;
        }
        h1{
            font-family:Helvetica, Arial, sans-serif;
            color:#FFF;
            font-size:31px;
            font-weight: bold;
            line-height:125%;
        }
        h2{
            font-family:Helvetica, Arial, sans-serif;
            color:#000;
            font-size:38px;
            font-weight: bold;
            line-height:125%;
        }
        h3{
            font-family:Helvetica, Arial, sans-serif;
            color:#000;
            font-size:20px;
            font-weight: bold;
            line-height: 100%;
        }
        p{
            font-family:Helvetica, Arial, sans-serif;
            color:#000;
            font-size:14px;
            font-weight: normal;
            line-height:125%;
        }
        a{
            color:#2755A1;
            text-decoraton:underline;
        }
        .nobr {
            white-space: nowrap;
            padding-left:0px;
            padding-right:0px
        }
        .button, .functionbutton{
                   color: #71B7E9;
                text-decoration: none;
                text-align: center;
                font: normal normal bold 1em/125% Helvetica, Arial, sans-serif;
                   display:inline-block;
                   background: #FFF;
                   -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                border-radius: 4px; 
                padding: 6px 10px;
    </style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
    <center>
    <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
        <tr>
            <td align="center" valign="top">
                <table class="contentWrapper" align="center" border="0" cellpadding="0" cellspacing="0" width="480px">
                    <tr>
                <!-- // Begin Template Preheader \\ -->
                        <td class="header" align="center" valign="top">
                            <p>Can't view this event invitation? <span class="nobr"><a href="*|ARCHIVE|*" target="_blank">View it in your browser.</a></span></p>
                        </td>
                    </tr>
                </table>
                <!-- // Begin Template Main message \\ -->
                <table class="mainWrapper" border="0" cellpadding="5" cellspacing="0" width="480px">
                    <tr>
                        <td>
                            <table class="contentTable" border="0" cellpadding="0" cellspacing="0" width="220px" align="left">
                                <tr>
                                    <td valign="top">
                                        <a href="" target="_blank">
                                        <img src="" alt="" title="" width="210px"> 
                                        </a>
                                    </td>
                                </tr>
                            </table>
                            <table class="contentTable" border="0" cellpadding="0" cellspacing="0" width="250px" align="left">
                                <tr>
                                    <td valign="top">
                                        <h1>HEADING ONE</h1>
                                        <h2>HEADING TWO</h2>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <table class="contentTable" border="0" cellpadding="10" cellspacing="0" width="480px">
                                <tr>
                                    <td valign="top" mc:edit="main">
                                        <p>Content</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="center">
                                        <a class="button" href="">Register now</a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                <table class="contentWrapper" align="center" border="0" cellpadding="0" cellspacing="0" width="480px">
                    <tr>
                        <td class="footer" align="center" valign="top">
                            <a href="" target="_blank">
                            <img src="" alt="" style="font-size:18px; font-weight:bold; padding-top:10px;" title="" width="180px" height="42px"> 
                            </a>
                            <p>*|HTML:LIST_ADDRESS_HTML|*<span class="nobr">Phone +61 3 9345 2555.</span></p>
                            <p>*|LIST:DESCRIPTION|* Please&nbsp;<a href="*|UNSUB|*">unsubscribe if you have received this email in&nbsp;error</a>.</p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    </center>
</body>
</html>
Redferret, 3 years ago

Hi Cheli! I'd always advise that you don't use semantic tags like P, H1, H2 etc.. as many clients apply their own rules to these. Nevertheless, you could set margin to 0 for good measure then try adjusting the line height. for Outlook 2007+ you'll want to use mso-line-height-rule:exactly; aswell.


Gmail app apologist
Cheli, 3 years ago

don't use semantic tags like P, H1, H2 etc.

Wow, really? I'd never seen that advice before (I'm new to this game, and new to coding too). What would you recommend I use, if not the semantic tags?

My H2 style now looks like this:

        h2{
            margin:0;
            mso-line-height-rule:exactly;
            font-family:Helvetica, Arial, sans-serif;
            color:#000;
            font-size:38px;
            font-weight: bold;
            line-height:125%;
        }

...have I understood your directions correctly? This has fixed the issue in my web browser; I haven't tested it in any email browsers yet.

Thanks so much for your help!

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
1-888-533-8098