HTMLメールのスペーサー（spacer.gif）について

横の余白を確保する際はスペーサー（spacer.gif）を使います。
PC用の幅は<td>タグのwidthで指定します。
そして、スマホで確実に確保したい幅を<img>タグのwidthで指定してください。
下記の例では、PCは20px、スマホは10pxずつ確保されるようにしています。

<tr>
<td width="20" style="font-size:0;"><img src="img/spacer.gif" alt="" width="10" height="1" style="display:block;"></td>
<td width="560"><span style="color:#333333;font-size:18px;font-weight:bold;line-height:150%;">見出しが入ります。</span><br>
<span style="color:#333333;font-size:14px;line-height:150%;">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</span></td>
<td width="20" style="font-size:0;"><img src="img/spacer.gif" alt="" width="10" height="1" style="display:block;"></td>
</tr>

高さを確保する際は、<td>タグのheightを使って指定すればいいです。

PC・スマホ共通

<tr>
<td height="20" style="font-size:0;"></td>
</tr>

PCとスマホで高さを変える場合
CSSを使います。
スマホでは表示されないようにclassを作っておきます。
PCのメーラーはCSSが効かないものが多いので、PCではHTML上のものは表示される前提で考えてください。

<style type="text/css"><!--
/* スマホ */
@media screen and (max-width: 480px) {
.space { display: none; }
}
/* PC */
@media screen and (min-width: 481px) {
.space { display: block; }
}
--></style>

スマホでは下の行が表示されないようになります。

<tr>
<td height="10" style="font-size:0;"></td>
</tr>
<tr>
<td height="10" style="font-size:0;" class="space"></td>
</tr>