一个很纠结的 css 样式问题

[geew]

看图吧
来源推特, 大家可以去看看

问题是: 这几个空隙是怎么来的, 没看到页面上写空格, 也没看到样式里面有设置啊 莫名其妙的就有了空格, 样式抄过来我的都没空格. 怎么做到的啊

[zzetao]

[66beta]

@zzetao 一楼头像的表情很到位

[arbipher]

@66beta 二楼的也很到位啊

[geew]

@zzetao 你这不是推特上的代码吧

[zzetao]

@66beta (°△° ; )

[zzetao]

@geew http://www.cnblogs.com/hailexuexi/archive/2010/07/25/1784611.html

[geew]

问了我一个前端的同事 搞明白了 html代码里 回车和空格是一样的 都会在页面上展示成空格, 但是回车的话用浏览器查看代码是看不到的

[geew]

@zzetao 不是问空格的表示方法哦

[jkjoke]

@geew 果真是回车的问题

[66beta]

@jkjoke
@geew
是的，行内元素间换行产生的

aaa<span>bbb</span>
==========================>
aaa
<span>bbb</span>

[learnshare]

空格、tab 缩进、换行 在 HTML 里都作为空白符处理，显示效果就是“空格”。默认是将多个空白符合并为一个“空格”的，也可以通过 CSS 的 white-space 属性来设置不同的处理方式。

参考 http://www.w3school.com.cn/cssref/pr_text_white-space.asp 和 https://developer.mozilla.org/en-US/docs/Web/CSS/white-space