<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html style="opacity: 1;" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="width=device-width" name="viewport" />
<title></title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i');
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
img {
display: block;
border-style: none;
line-height: 0px;
}
div,
p,
a,
li,
td,
th {
-webkit-text-size-adjust: none;
}
table {
display: table;
border-spacing: 0px;
padding: 0;
}
td {
border: 0;
padding: 0;
}
.two-column .contents {
font-size: 14px;
text-align: left;
}
.two-column img {
width: 100%;
height: auto;
}
.two-column .text {
padding-top: 10px;
}
.two-column {
text-align: center;
font-size: 0;
}
... (Remaining CSS styles omitted for brevity)
</style>
<!--[if mso]>
<style>
span, td, th, table, div, a {
font-family: Arial, Helvetica, sans-serif !important;
}
</style>
<![endif]-->
</head>
<body background="" bgcolor="#eceef3" style="">
<table cellpadding="0" cellspacing="0" style="border: 0px; padding: 0px; margin: 0px; position: absolute; display: none; float: left">
<tr>
<td height="1" style="font-size: 1px; line-height: 1px; padding: 0px;">
<!--Start BK pixel-->
<IMG SRC="" HEIGHT="1" WIDTH="1" /><br/><br/>
<!--End BK pixel-->
</td>
</tr>
</table>
...
<td align="center" valign="middle" style="padding: 0px 0px 0px 0px;">
<a href="#" target="_blank">
<img style="display:block;border:0;" src="" width="100%" height="auto" alt="" /></a>
</td>
Creating an email template with images using HTML and CSS can be tricky due to rendering differences across platforms. One common issue is white lines appearing between images on certain devices. To fix this, you can try setting the line-height: 0; property on the parent container of the images or adding vertical-align: middle; to the images themselves. Experimenting with these properties should help eliminate the unwanted white lines. Remember to test your template on various email clients to ensure consistent display.