html5中空白框怎么写,CSS: HTML中5种空白的显示

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

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

Sample code：

dome

* {

margin: 0;

padding: 0;

}

span {

background-color: red;

}

测试

test

test 

test 

test 

test 

网页中空白间距的大小.jpg

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

test

test0.png

test 

 的宽度是4px/0.25em

test1.png

test 

 的宽度是8px/0.5em

test2.png

test 

 的宽度是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,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

  8px/0.5em

半角空格，全称是En Space，en是字体排印学的计量单位，为em宽度的一半。根据定义，它等同于字体度的一半(如16px字体中就是8px)。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性：透明的，此空格有个相当稳健的特性，就是其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。

  16px/1em

全角空格，全称是Em Space，em是字体排印学的计量单位，相当于当前指定的点数。例如，1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性：透明的，此空格也有个相当稳健的特性，就是其占据的宽度正好是1个中文宽度，而且基本上不受字体影响。

  3.2px/0.2em

窄空格，全称是Thin Space。我们不妨称之为“瘦弱空格”，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。它是em之六分之一宽。[明明是五分之一]

‌

零宽不连字，全称是Zero Width Non Joiner，简称“ZWNJ”，是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为“”(zero width non-joiner，U+200C)，HTML字符值引用为： ‌

‍

零宽连字，全称是Zero Width Joiner，简称“ZWJ”，是一个不打印字符，放在某些需要复杂排版语言(如阿拉伯语、印地语)的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D (HTML: ‍ ‍)。