Hello, can anyone help me remove the black outline gap around the image? I have had multiple attempts but can't get rid of it!
Thanks in advance
Thanks in advance
HTML:
<p></p>
<style>
body {
margin: 0;
padding: 0;
background-color: #e7f0f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
table {
max-width: 600px;
width: 100%;
background-color: #FFFFFF;
margin: 0;
}
.header-image-cell,
.footer-image-cell {
padding: 0;
margin: 0;
background-color: #FFFFFF;
}
.header-image,
.footer-image {
width: 100%;
height: auto;
display: block;
margin: 0;
}
.content-cell {
color: #303a46;
text-align: left;
font-size: 16px;
padding: 25px 30px;
}
.content-cell p {
font-family: arial, helvetica, sans-serif;
font-size: 10pt;
margin: 0;
}
</style>
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tbody>
<tr style="height: 62px;"><!-- Set the height to match the image height -->
<td class="header-image-cell">
<table width="100%" style="text-align: center; margin: 0;">
<tbody>
<tr>
<td style="color: #ffffff; text-align: left; padding: 0; margin: 0;"><img class="header-image" src="/sys_attachment.do?sys_id=d34014db1b2775902862b455464bcb3a" title="Incident_960x85.png" width="700" height="62" alt="" data-library="false" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="height: 90.2131px;">
<td class="content-cell">
<table width="100%" style="text-align: left;">
<tbody>
<tr>
<td style="padding: 0;">
<p class="p1">${notification:body}</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="height: 32px;"><!-- Set the height to match the image height -->
<td class="footer-image-cell">
<table width="100%" style="text-align: left; margin: 0;">
<tbody>
<tr>
<td style="color: #303a46; text-align: left; font-size: 16px; padding: 0px; margin: 0px;"><img class="footer-image" src="/sys_attachment.do?sys_id=f950541f1b2775902862b455464bcb6b" title="FOOTER_960x43.png" width="700" height="32" alt="" data-library="false" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>