因爲img
是內聯元素,因此有vertical-align:baseline
因此產生了差距。
所以你要麼可以:
或設置
而且你不需要2 style
秒的標籤,也不需要用新屬性複製body
規則,只需將所有規則放在一個body
規則中即可。
注意:如果您爲html-email創建此項目,這是非內聯的CSS(大於body
),某些電子郵件客戶端(例如gmail)會剝離它,請確保將其全部內聯,或者使用一些收費會爲你做到這一點。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Battersea Studios</title>
<style type="text/css">
#outlook a {
padding: 0;
}
body {
width: 100% !important;
margin: 0;
padding: 0;
font-family: Arial;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
img {
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
border: 0;
display: block
}
a {
border: 0;
}
hr {
width: 20px;
text-align: left
}
a {
text-decoration: none;
color: white;
}
a:hover {
text-decoration: underline;
cursor: pointer;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" align="center" style="width:600px;font-size:20px">
<tr>
<td>
<table cellspacing="0" cellpadding="0" style="color:white;">
<tr>
<td>
<img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300">
</td>
<td style="background-color:#E66977;vertical-align:top;">
<table cellspacing="0" cellpadding="0" align="center" width="240">
<tr>
<td>
<img src="imgs/spacer-pink.jpg" alt="">
</td>
</tr>
<tr>
<td>
<strong>urtyryhry</strong>
</td>
</tr>
<tr>
<td>
<img src="imgs/spacer-pink.jpg" alt="">
</td>
</tr>
<tr>
<td>
ryhryhjtyhjty
<br>tyjtyjtyjty
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-color:#1EA553;vertical-align:top;">
<table cellspacing="0" cellpadding="0" align="center" width="240">
<tr>
<td>
<img src="imgs/spacer-green.jpg" alt="">
</td>
</tr>
<tr>
<td>
<strong>F</strong>
</td>
<tr>
<td>
<img src="imgs/spacer-green.jpg" alt="">
</td>
</tr>
<tr>
<td>
rthrthrth
<br>ryhryhryht
<br>hryhryhryt
</td>
</tr>
</table>
</td>
<td>
<img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300">
</td>
</tr>
<tr>
<td>
<img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300">
</td>
<td style="background-color:#EA752E;vertical-align:top;">
<table cellspacing="0" cellpadding="0" align="center" width="240">
<tr>
<td>
<img src="imgs/spacer-orange.jpg" alt="">
</td>
</tr>
<tr>
<td>
<strong>rtyryry</strong>
</td>
</tr>
<tr>
<td>
<img src="imgs/spacer-orange.jpg" alt="">
</td>
</tr>
<tr>
<td>
rryu56u
<br>ryuryuy
<br>uryuryuyrt
<br>ytyutyuty
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
您是否使用過任何CSS?如果你還沒有,那麼在HTML表格中有一些默認的填充。 當我打開你的小提琴,並選擇具有奇數填充的元素;我注意到還有一個字體大小的設置。我將其更改爲0px,它似乎可以修復您的奇數填充。 [Imgur](https://i.imgur.com/H36LrNX.png) –