Hello,

I'm struggling with a problem in the Outlook 365 client, that I hope you can help me with.

I have a very simple table setup with some space in top, and 365 thinks it should insert white lines in top and bottom:
https://www.screencast.com/t/mWFj57wIGx

Here is the complete code example:


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

<head>

    <title>Email Framework Version 1.0.1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no">
    <!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--<![endif]-->

    <style type="text/css">
        .ReadMsgBody {
            width: 100%;
            background-color: #F6F6F6;
        }

        .ExternalClass {
            width: 100%;
            background-color: #F6F6F6;
        }

        body {
            width: 100%;
            background-color: #f6f6f6;
            margin: 0;
            -webkit-font-smoothing: antialiased;
            font-family: Arial, Times, serif
        }

        h1,
        h2,
        h3,
        p,
        td {
            line-height: normal !important;
        }

        table {
            border-collapse: collapse !important;
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
        }

        @media only screen and (max-width: 639px) {
            .wrapper {
                width: 100%;
                padding: 0 !important;
            }
        }

        @media only screen and (max-width: 480px) {
            .centerClass {
                margin: 0 auto !important;
            }
            .imgClass {
                width: 100% !important;
                height: auto;
            }
            .wrapper {
                width: 320px !important;
                padding: 0 !important;
            }
            .header {
                width: 320px !important;
                padding: 0 !important;
                background-image: url(http://dummyimage.com/320x400/fff/fff) !important;
            }
            .container {
                width: 300px !important;
                padding: 0 !important;
            }
            .mobile {
                width: 300px !important;
                display: block !important;
                padding: 0 !important;
                text-align: center !important;
            }
            .mobile25 {
                width: 150px !important;
                padding: 0 !important;
                text-align: center;
                display: inline-table;
            }
            .mobile50 {
                width: 300px !important;
                padding: 0 !important;
                text-align: center;
            }
            .mobileOff {
                width: 0px !important;
                display: none !important;
            }
        }

    </style>

</head>

<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" style="background-color:#F6F6F6; font-family:Arial,serif; margin:0; padding:0; min-width: 100%; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;">

    <!-- Start Background -->
    <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#F6F6F6">
        <tr>
            <td width="100%" valign="top" align="center">

                <!-- Start TEST -->
                <table width="760" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#111111">
                    <tr>
                        <td height="20" style="font-size:20px; line-height:20px;"> </td>
                        <!-- Spacer -->
                    </tr>
                    <tr>
                        <td align="center">

                            <!-- Start Container -->
                            <table width="720" cellpadding="0" cellspacing="0" border="0" class="container">
                                <tr>
                                    <td width="360" class="mobile" style="font-family:arial; font-size:12px; color:#fff; line-height:18px; margin:0;" align="center">
                                        Menu 1
                                    </td>
                                    <td width="360" class="mobile" style="font-family:arial; font-size:12px; color:#fff; line-height:18px; margin:0;" align="center">
                                        Menu 2
                                    </td>
                                </tr>
                            </table>
                            <!-- End Container -->

                        </td>
                    </tr>
                    <tr>
                        <td height="20" style="font-size:20px; line-height:20px;"> </td>
                        <!-- Spacer -->
                    </tr>
                </table>
                <!-- End TEST -->

                <!-- Start Content -->
                <table width="760" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#ffffff">
                    <tr>
                        <td height="10" style="font-size:10px; line-height:10px;"> </td>
                        <!-- Spacer -->
                    </tr>
                    <tr>
                        <td align="center">

                            <!-- Start Container -->
                            <table width="720" cellpadding="0" cellspacing="0" border="0" class="container">
                                <tr>
                                    <td width="720" class="mobile" style="font-family:arial; font-size:12px; line-height:18px; margin:0;">
                                        {content}
                                    </td>
                                </tr>
                            </table>
                            <!-- End Container -->

                        </td>
                    </tr>
                    <tr>
                        <td height="10" style="font-size:10px; line-height:10px;"> </td>
                        <!-- Spacer -->
                    </tr>
                </table>
                <!-- End Content -->

            </td>
        </tr>
    </table>
    <!-- End Background -->

</body>

</html>