title: Unexplainable space above BUTTON inside DIV
body: <p>Preface: I've read lots of articles about images inside a div having a strange space around them, etc.</p>
  
  <p>Example #1: <a href="https://stackoverflow.com/questions/1518576/unwanted-padding-bottom-of-a-div">Unwanted padding-bottom of a div</a><br>
  Example #2: <a href="https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps" rel="nofollow noreferrer">https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps</a><br>
  Example #3: <a href="https://stackoverflow.com/questions/8283032/cannot-eliminate-space-between-2-horizontal-divs-inside-containing-div">cannot eliminate space between 2 horizontal divs inside containing div</a></p>
  
  <p>Their issues seems similar but not identical to mine. In this sample document, the border, padding, outline, etc are set to zero .. yet both Opera and Firefox render a spare pixel at the top of the div. The third may cheat a way around this space but nobody seems to answer why it's there..</p>
  
  <p>Edit: I read MANY articles that are temptingly close to answering this, but they all seem slightly different with the actual issue.</p>
  
  <p>What am I missing? It's my first question so be patient please :)</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Anger&lt;/title&gt;
      &lt;style&gt;
        *{
          cursor: default;
          margin: 0;
          outline: 0;
          border: none;
          padding: 0;
          text-decoration: none;
        }
        body{
          background-color: #87cefa;
        }
        div{
          background-color: #ffffff;
        }
        button{
          border-radius: 9px;
          padding: 1px 6px 2px 6px;
          font: 14px monospace;
          color: #ffffff;
          background-color: #1e90ff;
        }
      &lt;/style&gt;
    &lt;head&gt;
    &lt;body&gt;
      &lt;div&gt;
        &lt;button&gt;Sample Button&lt;/button&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;html&gt;
  </code></pre>
  
  <p>Is there some CSS3 that will make it all work? This is an experimental project, so the latest CSS3 is welcomed.</p>
  
  <p><strong>PS:</strong> I only care about the Opera rendering, though Firefox would be nice to support with the same standards compliant code.. Thanks!</p>