title: Why margin-top of the top div would apply to `<body>`?
body: <p>Here I posted a demo <a href="http://jsfiddle.net/LxYMv/1/" rel="noreferrer">http://jsfiddle.net/LxYMv/1/</a>.</p>
  
  <p>As you can see <code>&lt;body&gt;</code> gets margin-top:10px from the top div, and therefor <code>&lt;html&gt;</code>'s black background leaks out. Does it mean that I can't give the top div a positive margin-top?</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
          &lt;style&gt;
              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}
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div style="margin-top:10px;background:red;height:100px"&gt;Here the top div begins&lt;/div&gt;
          &lt;div style="height:800px"&gt;A long long div&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>