一个很纠结的 css 样式问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 3651 天前的主题，其中的信息可能已经有所发展或是发生改变。

看图吧

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

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

11 条回复 • 2014-12-03 16:36:45 +08:00

zzetao

2014-12-03 16:06:27 +08:00

66beta

2014-12-03 16:08:57 +08:00

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

arbipher

2014-12-03 16:13:40 +08:00

@66beta 二楼的也很到位啊

geew

2014-12-03 16:15:37 +08:00

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

zzetao

2014-12-03 16:15:46 +08:00

@66beta (°△° ; )

zzetao

2014-12-03 16:16:45 +08:00

geew

2014-12-03 16:17:06 +08:00

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

geew

2014-12-03 16:17:27 +08:00

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

jkjoke

2014-12-03 16:29:16 +08:00

@geew 果真是回车的问题

66beta

2014-12-03 16:31:22 +08:00

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

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

learnshare

2014-12-03 16:36:45 +08:00

空格、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