还有其他空格代码,例如&nbsp,用于HTML中的半角空格,em空格,en空格等吗?


149

想知道HTML新闻稿中是否还有其他代码可使用。

我会使用单元格填充或边距,但是我对HTML / CSS还是陌生的,我找不到能够同时影响主标题行和其下的子标题的更改。作为电子邮件,我很犹豫如何使用CSS来获得它-因为我不知道哪种电子邮件客户端不喜欢CSS而不是内联标记。

对于上下文,我使用的模板是Mailchimp片段中的“静音”主题:

    <!-- language: lang-html -->
<table cellspacing="0" cellpadding="0" border="0" align="center" width="626">
    <tbody>
        <tr>
            <td valign="middle" bgcolor="#546781" height="97" background="images/header-bg.jpg" style="vertical-align: middle;">
                <table cellspacing="0" cellpadding="0" border="0" align="center" width="555" height="97">
                    <tbody>
                        <tr>
                            <td valign="middle" width="160" style="vertical-align:middle; text-align: left;">
                                <img width="70" height="70" src="http://dl.dropbox.com/…….png" style="margin:0; margin-top: 4px; display: block;" alt="" />
                            </td>
                            <td valign="middle" style="vertical-align: middle; text-align: left;">
                                <h1 class="title" style="margin:0; padding:0; font-size:30px; font-weight: normal; color: #192c45 !important;">
                                    <singleline label="Title"><span>Title of Report</span></singleline>
                                </h1>
                                <h1 class="title" style="margin:0; padding:0; font-size:15px; font-weight: normal; color: #192c45 !important;">
                                    <singleline label="Title"><span>Small Subhead</span></singleline>
                                </h1>
                            </td>
                            <td width="55" valign="middle" style="vertical-align:middle; text-align: center;">
                                <h2 class="date" style="margin:0; padding:0; font-size:13px; font-weight: normal; color: #192c45 !important; text-transform: uppercase; font-weight: bold; line-height:1;">
                                    <currentmonthname />December
                                </h2>
                                <h2 class="date" style="margin:0; padding:0; font-size:23px; font-weight: normal; color: #192c45 !important; font-weight: bold;">
                                     <currentyear />2011
                                </h2>
                            </td>

                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>

整个电子邮件作为网页可以在这里看到

Answers:


381

是的,很多

包括但不仅限于:

  • 不间断空间:&#160;&nbsp;
  • 狭窄的不间断空间:(&#8239;无可用字符参考)
  • 太空:&#8194;&ensp;
  • 太空:&#8195;&emsp;
  • 每em 3个空间:&#8196;&emsp13;
  • 每码位4个空间:&#8197;&emsp14;
  • 每em 6个空格:(&#8198;无可用字符参考)
  • 图形空间:&#8199;&numsp;
  • 标点空间:&#8200; 或&puncsp;
  • 薄空间:&#8201; 或&thinsp;
  • 头发空间:&#8202; 或&hairsp;

span{background-color: red;}
<table>
<tr><td>non breaking space:</td><td> <span>&#160;</span> or <span>&nbsp;</span></td></tr>
<tr><td>narrow no-break space:</td><td> <span>&#8239;</span></td></tr>
<tr><td>en space:</td><td> <span>&#8194;</span> or <span>&ensp;</span></td></tr>
<tr><td>em space:</td><td> <span>&#8195;</span> or <span>&emsp;</span></td></tr>
<tr><td>3-per-em space:</td><td> <span>&#8196;</span> or <span>&emsp13;</span></td></tr>
<tr><td>4-per-em space:</td><td> <span>&#8197;</span> or <span>&emsp14;</span></td></tr>
<tr><td>6-per-em space:</td><td> <span>&#8198;</span></td></tr>
<tr><td>figure space:</td><td> <span>&#8199;</span> or <span>&numsp;</span></td></tr>
<tr><td>punctuation space:</td><td> <span>&#8200;</span> or <span>&puncsp;</td></tr>
<tr><td>thin space:</td><td> <span>&#8201;</span> or <span>&thinsp;</span></td></tr>
<tr><td>hair space:</td><td> <span>&#8202;</span> or <span>&hairsp;</span></td></tr>
</table>


3
Firefox将所有上述空格呈现为相同的宽度,比字体中的一个空格宽,但nbsp除外,在nbsp中,它呈现为一个空格并强加不间断字符。真可惜。在某些情况下,只有字符会before:
起作用

2
@fyngyrz至少在Linux上的Firefox 54中,这是不正确的(不再)。它也可能取决于字体。我已经在使用Arial字体系列的Stack Overflow上进行了测试。
只是一个学生

5
对于只想看看这种空白类型是什么样的人jsfiddle.net/LcLg5u25
Vadim Ovchinnikov

2
图形空间$numsp;对于对齐数字非常有用,因为该空间被定义为与相同字体中的数字一样宽。
Rudey

2
Windows Firefox现在可以正常使用(v.61)BTW。
MSC

13

有其他空格字符的代码,并且这样的代码效果很好,但是这些字符本身就是旧字符。仅由于它们存在于现有字符数据中,而不是用于新文档中,所以它们已被包括在字符集中。对于字体和浏览器版本的某些组合,它们可能会导致显示无法表示的字符的通用字形。有关详细信息,请查看我的有关Unicode空间的页面

因此,使用CSS更加安全,可以让您指定任何所需的间距,而不仅仅是固定宽度空格的特定宽度。如果您只是想在h2元素周围增加间距,那么在我看来,在这些元素上设置填充(更改padding的值:0已有的设置)应该可以正常工作。


谢谢,我最终使用了内联属性<h1 class =“ title” style =“ margin:0; margin-left:2px; padding:0; font-size:15px; font-weight:normal; color:#192c45!important ;“>我认为即使字体家族是Helvetica Neue等,这也是最安全的
wide_eyed_pupil 2011年

但是,如果它们是旧版并且“仅由于它们存在于现有字符数据中而被包含在字符集中”,则意味着它们不会很快消失。我看不出你在说什么。我认为任何“足够高级”的人都在寻找“半角空格”,这可能已经决定了不适合使用边距或填充。我决定(&thinsp;4 PACK&thinsp;)满足自己的要求-使用空白或填充将是一个糟糕的主意
Simon_Weaver 2014年

1
正如我所描述的,@ Simon_Weaver无法将固定宽度的空格字符可靠地工作。它们也是一个钝器:固定的一组宽度,尽管实际宽度取决于字体,与诸如字体之类的独立设置相反<span style="padding: 0 0.1em">4 PACK</span>,可以自由设置和调整值。
Jukka K. Korpela 2014年

1
尽管已经很老了,但彼得·K·谢林(Peter K Sheerin)的“ EM'n EN(和其他可疑字符)的麻烦”(alistapart.com/article/emen)在此主题上仍然很有用。特别是,尽管在过去的14年中这种情况可能有所改善,但并非所有的字体都正确地呈现了各种空间。
戴夫·兰德

1
还有ZERO WIDTH JOINER fileformat.info/info/unicode/char/200d/index.htmZERO WIDTH NON JOINER而且我倾向于比零宽度的空格使用更多的频率。
Reb.Cabin '18

9

不确定这是否是您要指的内容,但这是可以使用的HTML实体列表:

XML和HTML字符实体引用列表

使用“名称”列中的内容,您可以将它们包装在&和中;

例如 &nbsp;&emsp;等等。


因此,在标记文本的上下文中(例如在'<p>'和'</ p>'内部,'&'表示Unicode字形名称,对吗?';'是什么,因为空格字符在什么时候不表示信号?是由浏览器解析的吗?
wide_eyed_pupil 2011年

从某种意义上说,结束分号是可选的,因为HTML解析器仍将空白视为引用的结尾。然而,规范规定,你“必须”在结尾加上分号(w3.org/TR/html5/syntax.html#character-references
isNaN1247

PS-如果您将其标记为答案,我仍将不胜感激-如果您确实认为它已经回答了您的问题:)
isNaN1247 2011年


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.