为何 ul 和 li 之间有很大空隙? CSS 疑问

V2EX = way to explore

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

现在注册

已注册用户请登录

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

源码位置(请戳我)

没有设置margin啊,为何会有这么大空隙呢?

第 1 条附言 · 2014-12-25 11:30:15 +08:00

![](http://img.itc.cn/photo/j3TQRxIePoM)
ul左侧padding是WebKit默认的,并且不可修改,没看到 ul和li之间的margin是怎么生成的:(

ddd

空隙

CSS

20 条回复 • 2014-12-25 14:10:53 +08:00

emric

2014-12-25 10:42:23 +08:00

浏览器有默认样式, 善用F12.

coolzjy

2014-12-25 10:48:56 +08:00

ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}

dallaslu

2014-12-25 10:49:12 +08:00

ul 默认有 margin-top 属性；善用 css reset:

* { margin: 0; padding: 0}

seki

2014-12-25 10:51:39 +08:00

开发者模式看看 computed 里边给你怎么算的

seki

2014-12-25 10:52:04 +08:00

口误 -= =
开发者工具看看 computed 里边给你怎么算的

sunhk25

2014-12-25 11:01:30 +08:00

这是因为每个元素都有默认属性的。HTML 4-------
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }

learnshare

2014-12-25 11:01:57 +08:00

首先，你用错了 li 和 ul 两个标签。ul 里边不建议直接放文本，需要放而且只能放 li 标签，然后 li 标签里再放文本。

然后，ul 有一些默认样式，列举如下：

Chrome:

-webkit-margin-before: 1em; // 16px
-webkit-margin-after: 1em; // 16px
-webkit-padding-start: 40px;
line-height: normal; // 21px

FF:

margin-top: 1em; // 16px
margin-bottom: 1em; // 16px
padding-left: 40px;
line-height: 20px;

IE:

margin-top: 16px;
margin-bottom: 16px;
padding-left: 40px;
line-height: 18.4px;

第三，建议使用 http://necolas.github.io/normalize.css/latest/test.html 去统一一下浏览器样式，而非 reset。为什么？看这里 http://www.zhihu.com/question/20094066
浏览器给元素一些默认属性，是有它的道理的。你直接重置掉，不就跟拿 word 写 txt 一样么。