CSS: HTML中5种空白的显示

2018-10-22 本文已影响0人王策北

问题需要总结，知识需要沉淀

HTML提供了5种空格实体（space entity），它们拥有不同的宽度，非断行空格（）是常规空格的宽度，可适用于所有主流浏览器。~~其他几种空格&ensp; &emsp;   &zwnj; &zwj;在不同浏览器中宽度各异。~~[关于这个结论，我个人觉得是有问题的，请看下面demo]
Sample code：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dome</title>
    <style type="text/css" charset="utf-8">
        * {
            margin: 0;
            padding: 0;
        }
        span {
            background-color: red;
        }
    </style>
</head>
<body>
    <span>测试</span>
    <span>test</span>
    <span>test&nbsp;</span>
    <span>test&ensp;</span>
    <span>test&emsp;</span>
    <span>test&thinsp;</span>
</body>
</html>

网页中空白间距的大小.jpg
Note:在这个demo中我们可以看到，在不改变浏览器默认设置的情况下，IE9+、Edge、Firefox和Chrome对于&nbsp、&ensp;、&emsp;、 的实现效果是完全一样。Ps:这里由于没有safari浏览器的测试结果，所以暂不下定论，希望有Mac的小伙伴看到帮忙测试一下

test

test0.png
test 
 的宽度是4px/0.25em

test1.png
test&ensp;
&ensp;的宽度是8px/0.5em

test2.png
test&emsp;
&emsp;的宽度是16px/1em

test3.png
test 
 的宽度是3.2px/0.2em

test4.png

Note:浏览器的实现不同之处是对于英文字符的宽度；对于空白，在不改变浏览器默认设置的情况下是相同的。

  4px/0.25em
不换行空格，全称No-Break Space，是最常见的，也是我们使用最多的空格，它是按下space键产生的空格。在HTML中，空格或者换行等都会被浏览器解析为一个&nbsp，要使用html实体表示才可累加，该空格占据宽度受字体影响明显而强烈。

Wikipedia
In word processing and digital typesetting, a non-breaking space (" "), also called no-break space, non-breakable space (NBSP), hard space, or fixed space,^[1] is a space character that prevents an automatic line break at its position.
In some formats, including HTML, it also prevents consecutive whitespace characters from collapsing into a single space.
In HTML, the common non-breaking space, which is the same width as the ordinary space character, is encoded as   or  .
In Unicode, it is encoded as U+00A0

&ensp; 8px/0.5em
半角空格，全称是En Space，en是字体排印学的计量单位，为em宽度的一半。根据定义，它等同于字体度的一半（如16px字体中就是8px）。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性：透明的，此空格有个相当稳健的特性，就是其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。
&emsp; 16px/1em
全角空格，全称是Em Space，em是字体排印学的计量单位，相当于当前指定的点数。例如，1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性：透明的，此空格也有个相当稳健的特性，就是其占据的宽度正好是1个中文宽度，而且基本上不受字体影响。
  3.2px/0.2em
窄空格，全称是Thin Space。我们不妨称之为“瘦弱空格”，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。~~它是em之六分之一宽。~~[明明是五分之一]
&zwnj;
零宽不连字，全称是Zero Width Non Joiner，简称“ZWNJ”，是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为“”（zero width non-joiner，U+200C），HTML字符值引用为： &#8204;
&zwj;
零宽连字，全称是Zero Width Joiner，简称“ZWJ”，是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D (HTML: ‍ &zwj;）。

CSS: HTML中5种空白的显示

猜你喜欢

热点阅读