I'm creating a mail, and I put some HTML code within a string (the body of the mail) that will be sent to an AlternativeView (which is set into the MailMessage).
The problem is that within an image I add the style attribute for a margin-bottom
, and it doesn't have any effect in the received mail (Gmail).
After inspection of the image object into Gmail, the attribute style seems to has disappeared.
This is the html content (generated by my test application) got in a debug state by a breakpoint before the sending of the mail :
<h2><strong>Ratio :</strong> 80%<br><strong>Total Tests Count :</strong> 5<br /><strong>Total Tests Pass :</strong> 4</h2>
<br>
<hr>
<br>
<h2> <img src='cid:imgUITPR' width="16" height="16"/><strong> UITestPlan </strong > 'AssignHoursProfileToDriver' (TestSuites : 3) : <font color='#FF5252'>Failed</font></h2>
<h3> <img src='cid:imgUITSR' width="16" height="16" style='margin-bottom: -2px;' /><strong > UITestSuite </strong > 'CreateDriver' (Tests : 4) : <font color='#FF5252'>Failed</font></h3>
<h4> <img style='margin-bottom: -3px;' src='cid:imgUITG' width="16" height="16" /><strong > UITest </strong > 'OpenDriversModule' (Steps : 1) : <font color='#4CAF50'>Pass</font></h4>
<h4> <img style='margin-bottom: -3px;' src='cid:imgUITG' width="16" height="16" /><strong > UITest </strong > 'ClickOnCreateDriver' (Steps : 1) : <font color='#4CAF50'>Pass</font></h4>
<h4> <img style='margin-bottom: -3px;' src='cid:imgUITG' width="16" height="16" /><strong > UITest </strong > 'FillNewDriverDetails' (Steps : 4) : <font color='#4CAF50'>Pass</font></h4>
<h4> <img style='margin-bottom: -3px;' src='cid:imgUITR' width="16" height="16" /><strong > UITest </strong > 'ClickOnValidate' (Steps : 1) : <font color='#FF5252'>Failed</font></h4>
<h3> <img src='cid:imgUITS' width="16" height="16" style='margin-bottom: -2px;' /><strong > UITestSuite </strong > 'CreateHoursProfile' (Tests : 1) : <strong>Ignored</strong></h3>
<h4> <img style='margin-bottom: -3px;' src='cid:imgUIT' width="16" height="16" /><strong > UITest </strong > 'OpenConfigurationModule' (Steps : 1) : <strong>Ignored</strong></h4>
<h3> <img src='cid:imgUITS' width="16" height="16" style='margin-bottom: -2px;' /><strong > UITestSuite </strong > 'AssignProfileToDriver' (Tests : 0) : <strong>Ignored</strong></h3>
Edit: I used negative margin, Gmail as Outlook and Yahoo doesn't support negative margin.
I have seen in this blog post on point 9 :
Gmail does not allow negative CSS margin values
It seems webmail clients tend to ignore margin completely.