Css padding is not working as expected in Outlook

Padding conundrums? Try table cell-padding

Outlook typically has got those Mondays vibes when it comes to obeying rules — especially with CSS padding. But tables? Outlook turns more compliant.

To use table cells as padding equivalent, you create nested tables and manipulate cellpadding (Outlook's therapy). Here's an example:

<table>
  <tr>
    <td>
      <table cellpadding="10">
        <tr>
          <td><!-- I guess RSVP stands for Remember Space Via Padding--></td>
        </tr>
      </table>
    </td>
  </tr>
</table>


This approach gives padding a good chance of being interpreted correctly by Outlook.

Outlook's need for fillers? Use spacer images

In some cases, Outlook behaves like that tricky puzzle that doesn't let height and width fit correctly.

We can counteract this by using a spacer image or otherwise known as Outlook's glasses. This is an invisible 1x1 pixel sized according to your needs that comes with your layout dimensions:

<td>
  <img src="blank.gif" width="20" height="20" style="display:block;">
  <!-- Padding is like air, you don't notice until it's gone -->
</td>


The cell, now tamed, will adhere to the dimensions specified by the blank image, thus holding your padded content properly.

Embrace the inline styles

Outlook, unlike modern browsers, has an aunt-like fondness for inline styles. Instead of external stylesheets, you should embed CSS directly within your HTML elements to keep Outlook happy:

<td style="font-size:16px; color:#333;">
   <!-- Content that Outlook won't frown at -->
</td>


This technique improves compatibility, ensuring that styles are applied more uniformly across diverse email clients.

Simplify to amplify (consistency)

For Outlook compatibility, take one step back from complex CSS and two steps towards simpler HTML. Reducing CSS complexity might feel like travelling back to the 90s. Still, it helps maintain consistency, especially for email display across different viewing platforms.

Responsive design: Outlook style

It's a common notion that with media queries, responsiveness is a breeze. But remember, Outlook likes to play by its own rules.

In the realm of Outlook, the key to responsive emails lies in fluid tables and percentage widths.

<table width="100%">
  <tr>
    <td width="50%">
    <!-- I'm not used to having so much space -->
    </td>
    <td width="50%">
    <!-- And now I've too much space...make up your mind already -->
    </td>
  </tr>
</table>


Borders on the verge of collapse? Use border-collapse

Outlook can sometimes present double vision with borders, especially due to spacing between cells. The antidote? border-collapse: collapse;

<table style="border-collapse: collapse;">
  <!-- ... -->
</table>


This seemingly simple addition tackles many border-related issues, ensuring that the borders render as expected, and don't flee the scene.

Cellpadding: The hidden savior

The often overlooked and older cellpadding attribute within HTML tables may provide a reliable solution to add space within table cells.

<table cellpadding="10">
  <tr>
    <td>Content goes where it is meant to</td>
  </tr>
</table>
