div.parent的margin屬性為margin:0 auto，與body之間不應該有空隙，但是由於div.child的margin屬性設定為margin-top:10px，div.parent出現了乙個本不該有的margin-top:10px效果。
原因在於：w3c的盒模型-collapsing margins
in this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.毗鄰的兩個或多個外邊距(margin)會發生摺疊。要發生摺疊要滿足一下兩種情況：
外邊距沒有被非空內容、padding、border或clear分隔。
margin都沒有float、inline-block、position:absolute定義。
注意
關於第2點：
a
b
分別是：
正值：50px，150px，200px
負值：-60px，-100px，-120px
margin都為正值時，取margin最大的值
margin中有正有負時，取正負margin絕對值最大兩個margin，然後帶符號相加。
margin均為負值時，取絕對值最大的margin，然後帶符號位移。
塊級格式化內容不和子元素發生margin摺疊
元素自身的margin-bottom和margin-top相鄰時也會摺疊
CSS 盒模型及常見的問題
盒模型 content padding border margin 注 1 背景色只能填充到margin以內的區域 2 文字的content以內的區域新增 3 padding不能為負數，margin可以為負數 box sizing box sizing 屬性允許您以特定的方式定義匹配某個區域的特定元...
CSS常見問題
viewport fit,它有三個可選值 contain 可視視窗完全包含網頁內容 cover 網頁內容完全覆蓋可視視窗 auto 同contain的作用.box box after在flex多行布局中，justify content space between 這個屬性如果最後一行元素沒有填滿，會...
CSS常見問題
viewport fit,它有三個可選值 contain 可視視窗完全包含網頁內容 cover 網頁內容完全覆蓋可視視窗 auto 同contain的作用.box box after在flex多行布局中，justify content space between 這個屬性如果最後一行元素沒有填滿，會...