When attempting to create an HTML Email template that includes a button with a link and has a maximum width with consistent margins on both sides, I encountered some issues. While certain parts of the CSS were applied correctly, others were not displaying as intended. For instance, the button's background color and font color appeared fine, but there was no padding on the background and text decorations remained visible.
A similar problem arose when trying to set a maximum width for the entire email template with equal left and right margins. The width would be set correctly, but the margins would not adjust accordingly.
These discrepancies only occurred when viewing the email in clients rather than web browsers. Inline CSS was used exclusively, and the layout was coded within a table structure.
The code snippet used for the button is as follows:
<tr><td>
<h1> <a style="background-color: #8c30ff; color:white; text-decoration: none; padding: 0.5em" href="https://google.com"> Join now </a></h1>
</td></tr>
An attempt was made to define the maximum width using the following styling:
<table style="margin-bottom: 80px; margin-top: 80px; margin-left: auto; margin-right: auto; max-width: 620px; align-content: ">