一、使用全角空格IDEOGRAPHIC SPACE---- 
Encodings | |
---|---|
HTML Entity (decimal) |   |
HTML Entity (hex) |   |
How to type in Microsoft Windows | Alt +3000 |
UTF-8 (hex) | 0xE3 0x80 0x80 (e38080) |
UTF-8 (binary) | 11100011:10000000:10000000 |
UTF-16 (hex) | 0x3000 (3000) |
UTF-16 (decimal) | 12,288 |
UTF-32 (hex) | 0x00003000 (3000) |
UTF-32 (decimal) | 12,288 |
C/C++/Java source code | "u3000" |
Python source code | u"u3000" |
全角空格被解释为汉字,所以不会被被解释为HTML分隔符,可以按照实际的空格数显示。
「叉三千」指什么呢?哈哈,其实是全角空格。
中文字体都是等宽的,一个全角空格的宽度就是一个普通中文的宽度。所以,上面的demo中 空格换成全角空格也是可以滴!
但是,我们不能直接在页面中打全角空格,因为在大多数编辑器中空格是透明滴,很容易就被删掉;另外,HTML压缩时候,空格很可能被干掉!咋办?需要转换书写形式。
在web页面上,一般有3种书写:
直接,例如搜狗输入法输入“版权” – ©.
web字符,©
charCode表示:©
而上面的 ,  就是具有特定名称的web字符。但是,恕我寡闻,我并不清楚全角空格是否有对应& + 关键字示意,所以,就使用工具转成了charCode字符表示,也就是这里的 ,又称「叉三千」!
二、使用空格的替代符号
替代符号就是在需要显示空格的地方加入替代符号,这些符号会被浏览器解释为空格显示。
字符以及HTML实体 | 描述以及说明 |
---|---|
|
这是我们使用最多的空格,也就是按下space键产生的空格。在HTML中,如果你用空格键产生此空格,空格是不会累加的(只算1个)。要使用html实体表示才可累加。为了便于记忆,我总是把这个空格成为“牛逼(nb)空格(sp – space)”,虽然实际上并不牛逼。该空格占据宽度受字体影响明显而强烈。在inline-block布局中会搞些小破坏,在两端对齐布局中又是不可少的元素。是个让人又爱又恨的小东东。 |
  |
该空格学名不详。为了便于记忆,我们不妨就叫它“恶念(e n-ian)空格”。此空格传承空格家族一贯的特性:透明滴!此空格有个相当稳健的特性,就是其占据的宽度正好是1/2个中文宽度,而且基本上不受字体影响。 |
  |
该空格学名不详。为了便于记忆,我们不妨就叫它”恶魔(e m-o)空格”。此空格也传承空格家族一贯的特性:透明滴!此空格也有个相当稳健的特性,就是其占据的宽度正好是1个中文宽度,而且基本上不受字体影响。 |
  |
该空格学名不详。我们不妨称之为“瘦弱空格”,就是该空格长得比较瘦弱,身体单薄,占据的宽度比较小。我目前是没用过这个东西,这里亮出来是让其过一下群众演员的瘾。 |
可以用名称或编号作为空格的替代符号,名称必须小写,末尾的“;”不能省略。
其中的 和 ,由于具有某一超赞的特性,使其可以登上web届的舞台!什么特性呢?如上表加粗展示,1. 透明; 2. 宽度正好跟中文正好是1:2和1:1的关系,于是,一些中文排版对齐什么的,直接就可以使用这两个空格调节
三、使用CSS的 white-space 属性
CSS的white-space属性用于设置文本中空格的处理方式,当white-space属性取值为pre时,浏览器会保留文本中的空格和换行,这样你就可以直接在文本中使用空格和回车了。 这种方法特别适合于在网页中显示程序代码。
使用HTML的标签也可以达到类似的效果,但标签有一些不太好的特性,不如使用CSS的white-space属性更方便。
四、使用CSS的 letter-spacing 属性
CSS的letter-spacing属性用于设置文本中字符之间的间隔,它的取值可以是一个带单位的长度值,浏览器会在字和字之间设置指定长度的空白。
注意,如果文本中有英文单词,则空白会加在字母之间,而不是单词之间。
五、使用CSS的 word-spacing 属性 CSS的word-spacing属性用于设置文本中单词之间的间隔,它的取值可以是一个带单位的长度值,浏览器会在单词和单词之间设置指定长度的空白。 注意,HTML是以空格来区分单词的,它会把单词间的空白按指定长度显示。 六、使用CSS的 text-indent 属性 CSS的text-indent属性用于设置首行缩进,它的取值可以是一个带单位的长度值,浏览器会在段落的首行开始处设置指定长度的空白。 说明:em 是一个相对长度单位,2em 表示要缩进两个字的距离。
内容部分来自:http://www.zhangxinxu.com/wordpress/2015/01/tips-blank-character-chinese-align/