margin外边距合并

之前遇到了一个问题：

XML/HTML code

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

< html > < head > < meta  http-equiv = "Content-Type"  content = "text/html; charset=utf-8" > < title >无标题文档</ title > < style  type = "text/css" > * {      margin:0;      padding:0;      border:0;      background-color:#FFF; }   body {      background-color:#006; }   div {      width:600px;      height:1000px;         margin:100px auto;      background-color:#0F0; } </ style > </ head >   < body > < div ></ div > </ body > </ html >

本来想要的是上面的白条部分也应该是蓝色的，为什么会这样呢？

这是外边距合并造成的问题。

http://www.w3school.com.cn/css/css_margin_collapsing.asp

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

body和div的上外边距合并了，body的上外边距是0，div的上外边距是100px，所以合并后的上外边距是100px，也就是body的上外边距也变成了100px。