css 如何在html中为电子邮件添加span之间的空格？

des4xlb0 于 2023-04-01 发布在其他

关注(0)|答案(9)|浏览(424)

我正在制作电子邮件模板，所以我可以做什么有限。
我已经有了align=“center”，但是我仍然需要两个跨距之间的空间。我该怎么做呢？
代码：

<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>

注意：我不能在电子邮件模板中使用边距或填充。

css

来源：https://stackoverflow.com/questions/16698412/how-do-i-add-space-between-span-in-html-for-emails

9条答案

按热度按时间

dxpyg8gm1#

不是所有的电子邮件客户端都支持边距。过去我在填充方面也遇到过一些轻微的不一致，尽管它确实有效。
可能看起来像一个黑客（但不是html的电子邮件，无论如何？）-最安全的方式在电子邮件中使用多个 一起这样：    .
我也会使用<font>标签而不是<span>，它们更一致。

赞(0）回复(0）举报 2023-04-01

vshtjzan2#

你要找的是填充物吗？

span{
padding-left: 15px;
}

赞(0）回复(0）举报 2023-04-01

pnwntuvh3#

试试这个CSS：

span{
    margin-right: 10px;
}

下面是Demo：http://jsfiddle.net/84qyG/

赞(0）回复(0）举报 2023-04-01

8ljdwjyq4#

考虑这样做：

<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>

注意微妙的在跨度之间。
不知道为什么你不能使用margins。还有，你使用td是有原因的吗？我猜它是表格的一部分？

赞(0）回复(0）举报 2023-04-01

yyhrrdl85#

我相信你真正要找的是

display: block;

例如http://jsfiddle.net/kshreve/5jNGu/
另一种方法是在闭合跨度之后添加<br/>。
编辑：您还应该考虑添加CSS类以减少冗余样式的数量

赞(0）回复(0）举报 2023-04-01

gstyhher6#

考虑在2个span标签之间插入一个空div吗？

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

赞(0）回复(0）举报 2023-04-01

cwdobuhd7#

或者使用多个非分隔符字符或间隔图像可以解决您的问题。

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

赞(0）回复(0）举报 2023-04-01

dojqjjoe8#

您可以使用padding或margin：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）回复(0）举报 2023-04-01

mnemlml89#

如果你使用的是jsx/React，你可以使用反引号：