title: document.body.style.margin removing elements
body: <p>I'm playing with some JS and wondering why when adding styling to my bodies margin my other elements disappear?</p>
  
  <pre><code>window.onload = function() {
  
  with(document.body.style) {
    margin = "0px 0px 0px 0px";
  }
  
  var header = document.createElement('header');
  
  with(header.style) {
    height = '2px';
    marginBottom = '30px';
    backgroundColor = '#333';
    width = '100%';
    margin = '0';
    padding = '0';
  }
  
  document.body.appendChild(header);
  
  var h1 = document.createElement('h1');
  var name = document.createTextNode("Header1");
  h1.appendChild(name);
  
  document.body.appendChild(h1);
  
  }
  </code></pre>
  
  <p>What i'm trying to do is remove margin and padding from being applied to any elements. In CSS i would have done this:</p>
  
  <pre><code>* { margin: 0; padding: 0; }
  </code></pre>