为什么上边div的margin-top适用于`<body>`?

Ruf*_*fus 15 html css

在这里,我发布了一个演示http://jsfiddle.net/LxYMv/1/.

正如你所看到的那样<body>获得margin-top:距离顶部div 10px,因此<html>黑色背景泄露出来.这是否意味着我不能给顶级div一个积极的优势?

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style>
            html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}
            html{background:black}
            body{background:white}
        </style>
    </head>
    <body>
        <div style="margin-top:10px;background:red;height:100px">Here the top div begins</div>
        <div style="height:800px">A long long div</div>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

Guf*_*ffa 25

这称为边缘折叠.

当具有边距的元素位于没有填充或边框的元素内时,边距将应用于父元素之外,而不是在子元素和父边之间.

这种行为的基本原因是margin指定元素之间的最小区别,而不是像填充这样的元素周围的距离指定元素内容周围的距离.