HTML Email Development and margin-block [closed]

Question

I have an interesting issue I can't seem to figure out.

Chrome and FireFox are adding a default styling of margin-block-start:1em; margin-block-end:1em; and Safari is adding margin-before:1em; margin-after:1em; to paragraph and header elements. This is resulting in more space than intended between paragraphs as well as headers and their associated copy.

I'm able to add a reset that works for viewing the HTML directly in the browser. But this reset is not pulling through on Outlook.com, Office 365 and Gmail. It appears these webmail clients do not support these CSS properties and are filtering them out.

This is what I have attempted to use so far:

p, h1, h2, h3, h3, h4, h4 {
   margin-block-start:0px;
   margin-block-end:0px;
   margin-inline-start:0px;
   margin-inline-end:0px;
   -webkit-margin-before:0px;
   -webkit-margin-after:0px;
   margin-before:0px;
   margin-after:0px;
}

This CSS styling is not making it into the style tag on the email clients. For example, Outlook.com shows the brackets as being empty with no properties within it. Therefore no global reset is taking place and the value of 1em is being applied by the browser.

Has anyone found a workaround to this issue yet? Setting margin and padding properties don't appear to override margin-block.

Tychonn

Answer 1

It looks like setting a global reset for all the elements for margin:0; resolves the issue.

If you only say define margin-bottom both inline or globally, or define all your margins in class Chrome, Firefox and Safari start adding margin-block which is not supported by the webmail clients, so you can't directly reset it.

Adding this reset to the style tag in the head of the HTML document should resolve any margin-block margins being added.

p, h1, h2, h3, h3, h4, h5 {
  margin: 0;
}

Tychonn