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

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 4189 days ago, the information mentioned may be changed or developed.

源码位置(请戳我)

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

Supplement 1 · Dec 25, 2014

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

ddd

空隙

CSS

20 replies • 2014-12-25 14:10:53 +08:00

emric

Dec 25, 2014

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

coolzjy

Dec 25, 2014

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

Dec 25, 2014

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

* { margin: 0; padding: 0}

seki

Dec 25, 2014

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

seki

Dec 25, 2014

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

sunhk25

Dec 25, 2014

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

learnshare

Dec 25, 2014

首先，你用错了 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 一样么。