CSS：<ul>的左边为什么有40px的距离呢？

Question

这个代码：
<div id="menu">
<ul><li>a</li></ul>
</div>
随便定义个大小：
div{
width:500px;
height:100px;
border:1px solid red;
}
ul{
width:200px;
height:100px;
border:1px solid blue;
}
会发现<ul>左边和下边都有margin,左边有40px，右边有20px;
这是为什么？？
还有如果设定ul{float:left; margin-left:40px;}，那他的左边距会变成80px,也就是双倍显示。这是为什么？？
上面的CSS写错了个地方：
不是div应该是menu，反正问题还是那些问题。

Answer 1

浏览器的默认值.
其实很多元素浏览器都设有相应的默认值的,就如

ul有40px 的margin
body有10px 的margin
a标签有下划线
p标签字体默认是黑色
等……
（当然，各不同的浏览器，其默认值设置也有所不同）

大多数人在写CSS前，一般都会加上一条通配符设置取消浏览默认值的：

*{margin:0;padding:0;}

其实浏览器的一些默认值，自己实践多了，自然就会知道的了。

Answer 2

将ul的margin和padiding设置为0；

由于不同浏览器之间有不同的默认样式，这样就导致了：“明明我没有设置margin padding，但是元素之间却存在间距等状况”。解决这种情况的方法就是在开始写css之前将所有元素的padding margin默认样式统一起来。在css文档中添加如下样式即可：

*{
padding:0;
margin:0;}

Answer 3

float:left; margin-left一起用的时候常出现问题，加display:inline，margin-left的数值在各个浏览器中就统一了，不会有差距 。

Answer 4

你需要重置一下ul,li的默认设置：
ul,li{margin:0; padding:0;}
li{list-style:none;}