web-dev-qa-db-ja.com

メールのHTMLでスパン間にスペースを追加するにはどうすればよいですか？

メールテンプレートを作成しているので、できることには限りがあります。

Align = "center"がありますが、2つのスパンの間にスペースが必要です。これどうやってするの？

コード：

<td width="659" height="28" bgcolor="#999999" align="center">
    <span style="color: #ffffff;font-family: Arial, sans-serif;font-size:20px;">
    CODE:</span> <span style="color: #ffffff;font-family: Arial, sans-serif;
    font-size:20px;font-weight:bold;">BEHAPPY</span><span style="color: #ffffff;
     font-family: Arial, sans-serif;font-size:20px;">• Ends 6/01</span>
            </td>

注：メールテンプレートで余白やパディングを使用することはできません。

htmlcssemailhtml-email
6
starbucks

マージンは、すべての電子メールクライアントでサポートされているわけではありません。また、パディングは機能しますが、過去に若干の不整合がありました。

ハックのように見えるかもしれません（しかし、とにかく電子メールのhtmlではありませんか？）-電子メールで最も安全な方法は、次のように複数の&nbsp;を一緒に使用することです：&nbsp;&nbsp;&nbsp;。

また、<font>の代わりに<span>タグを使用すると、一貫性が高まります。

12
John

あなたが探しているものをパディングしていますか？

span{
padding-left: 15px;
}
5
dsuess

このCSSを試してください：

span{
    margin-right: 10px;
}

ここにデモがあります： http://jsfiddle.net/84qyG/

4
Nishu Tayal

複数の改行なし文字またはスペーサー画像を使用すると、問題を解決できます。

<span style="">text #1</span><img src="images/spacer.gif" alt="" border="0" width="10" height="1" /><span style="">text #2</span>
1
hmhcreative

これを行うことを検討してください：

<td width="659" height="28" bgcolor="#999999" align="center">
<span style="color: #ffffff;font-family: Arial, sans-serif;font-size:20px;">
CODE:</span> <span style="color: #ffffff;font-family: Arial, sans-serif;
font-size:20px;font-weight:bold;">BEHAPPY</span>&nbsp;<span style="color: #ffffff;
 font-family: Arial, sans-serif;font-size:20px;">• Ends 6/01</span>
        </td>

微妙な＆nbsp;に注意してください。スパンの間。

ただし、マージンを使用できない理由はわかりません。また、tdを使用している理由はありますか？私はそれがテーブルの一部だと思いますか？

1
Captain Skyhawk

あなたが実際に探しているのは

display: block;

例 http://jsfiddle.net/kshreve/5jNGu/

これを行う別の方法は、クロージングスパンの後に<br/>を追加することです。

編集：冗長なスタイリングの量を減らすためにCSSクラスの追加も検討する必要があります

1
kshreve

パディングまたはマージンを使用できます： http://jsfiddle.net/tpXF4/

<td width="659" height="28" bgcolor="#999999" align="center">
<span style="color: #ffffff;font-family: Arial, sans-serif;font-size:20px;padding-right:30px;">
CODE:</span> <span style="color: #ffffff;font-family: Arial, sans-serif;
font-size:20px;font-weight:bold;">BEHAPPY</span><span style="color: #ffffff;
 font-family: Arial, sans-serif;font-size:20px;">• Ends 6/01</span>
        </td>
0
user1633525

2つのスパンタグの間に空のdivを挿入することを検討しますか？

.spacer {
    display: inline-block;
    width: 10px;
}
0
Jim Bash